防抖与节流

关键词：

      节流：节流阀, 触发了, 就关闭阀门, 开了门, 才能执行下次

      防抖: 延时器, 一段时间触发了, 就重开延时器

 意义 ：为了性能优化, 可以阻止事件的频繁触发

• 节流
  • 是什么？
  • 减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

<立刻>执行某件事, 但是事件执行的过程中, 关闭<节流阀>, 只有当事件执行完, 才能执行第二次

 

•  怎么用？

function throttle(fn, delay){

let loading = true;

return () => {

if(loading) { //如果阀门已经打开，就继续往下

setTimeout(()=> {

fn.apply(this, arguments);//定时器结束后执行

loading = true;//执行完成后打开阀门

}, delay)

loading = false;//关闭阀门

}

}

}

// 刚开始loading为true，然后将validloading置为false,进入了定时器，在定时器的时间期限之后，才会将loading重置为true,loading为true之后，之后的点击才会生效

// 在定时器的时间期限内，loading还没有重置为true，会一直进入return，就实现了在N秒内多次点击只会执行一次的效果

• 使用场景：

  (1) 点按钮loading请求, 发请求立刻发, 发的过程中, 不会发第二次

  (2) 轮播图, 点击箭头, 开始滑动, 滑动的过程中, 关闭节流阀, 等动画结束, 才能执行第二次

  (3) 下拉刷新, 上拉加载更多, 一旦请求了, loading状态, 关闭节流阀

  (4) h5小游戏, 跑酷, 跳的时候, 关闭节流阀, 落地之后, 才能跳第二次

• 防抖是什么？
• 防抖就是防止抖动，避免事件的重复触发

<延迟>执行某件事, 会开个延时器, 等一会儿, 如果事件再次触发, 重开延时器，直到一段时间内, 都没有触发了, 才执行

 

•  怎么用？

function debounce(fn, delay){

let timer = null;

return function(){

clearTimeout(timer);

timer = setTimeout(()=> {

        fn.apply(this, arguments);

}, delay)

}

}

• 使用场景：

  (1) resize事件, 屏幕修改宽度高度, 会非常频繁的触发

      一般需求是, 等用户修改完屏幕大小后, 做适配 => 延迟执行

  (2) 输入框搜索提示, 实时每个字母都立刻做提示, 频繁触发了

      一般需求是, 等用户一段时间没有输入新的内容, 做搜索提示 => 延迟执行