防抖动和节流函数原理和差别

为什么需要

当监听的事件被高频率触发时(比如滚动)，绑定的处理函数相应也高频率执行多次，这会大大降低性能。
这时就需要设置防抖动或节流

防抖动

设置一个时间间隔delay，当事件触发后，经过了delay时间，下次的还未触发，才会执行；
若事件触发后，delay时间内又触发了一次，就不会执行。
直接上代码：

function debounce(func, delay) {
  // 防抖动函数,下次执行前等待时间大于等于delay时func才被执行
  // 持久化timer变量
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

在频繁事件中调用debounce返回的函数实现防抖。

原理

timer能一直被访问(闭包)，第一次执行，设置定时器，delay时间过后执行，如果过了delay时间未被二次执行，func就得以调用；
如果在delay时间内又被执行，则会清除掉timer定时器，并且重新开个定时器，相当于重置了时间。

节流

这次触发与上次触发时间间隔大于设置的值时，就会执行。

function throttle(fn,gapTime){
  let _lastTime = 0;
  return function(...args){
    let _nowTime = +new Date() // 快速转为时间戳
    if(_nowTime - _lastTime > gapTime){
      fn.apply(this,args)
      _lastTime = _nowTime
    }
  }
}

差别

防抖动函数最后触发的那次总会执行，因为过了delay时间内没有下次的触发来充值定时器。
而节流最后触发的那次只有与上次时间间隔大于设置的时间才会被执行。