防抖和节流

防抖

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
好处: 能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次

应用场景

1. 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后一段时间，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
2. 滚动条停止滚动一段时间再去执行回调函数；
3. 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）

实现代码

实现步骤

1. 一旦触发事件，立即设置一个定时器用于触发真正的回调函数并保存下来，定时器的时间为期望停止触发事件后间隔多久真正执行回调函数的时间；
2. 当在间隔时间内再次触发事件，则清除前一个定时器并设置一个新的定时器。

 function debounce(fn, delay) {
      let timer = null//形成一个闭包
      return function() {
          clearTimeout(timer)//如果设置了时间，则清除前面设置的时间，然后重新开始计时
          timer = setTimeout(() => fn(), delay)
      }
  }
1
2
3
4
5
6
7

节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。

应用场景

1. 通过ajax回调获取图片，需要隔一段时间发起一次ajax请求获取图片。如果用防抖，则页面一直是空白状态；
2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源。

实现代码

实现步骤

1. 记录前一次执行的时间
2. 触发事件时判断当前时间和前一次执行时间的时间差是否大于间隔时间；如果大于，说明应该再次调用回调函数执行，如果小于，说明间隔时间还不够，可以直接忽略。

利用闭包记录前一次执行的时间

使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后依然会再一次执行

function throttle1(fn, delay){
    let flag = true
    return (...args)=>{
        if(flag){
            flag = false
            setTimeout(() => {
               fn(...args)
            }, delay);
            flag = true 
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行

function throttle2(fn,delay){
    let oldtime = Date.now()
    return function(...args){
        let newtime = Date.now()
        if(newtime-oldtime > delay){
            fn(...args)
            oldtime = newtime
        }
    }
}
1
2
3
4
5
6
7
8
9
10

总结

相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。
不同点：
防抖是让你多次触发，只生效最后一次。适用于只需要一次触发生效的场景。
节流是让你的操作，每隔一段时间触发一次。适用于多次触发要多次生效的场景。