关于js节流函数throttle和防抖动debounce

废话不多说，直奔主题。

什么是throttle和debounce？

这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多次，如果其中涉及的代码偏重，那么性能消耗肯定是非常大。使用节流和防抖就是去优化这种情况，通过同的使用场景决定使用的对象，接下来就对比一下两者的区别。

throttle

在指定的delay(延迟时间)内，在delay间隔内多次调用，throttle会舍弃中间的所有调用操作，直到用户停止行为后的delay后执行一次预期执行函数。这就称为函数节流。

debounce

跟节流函数一样，debounce也是在设定的delay间隔内多次调用执行函数的话，会舍弃这些操作。和throttle不同的是，debounce多了个强制执行时间参数mustRunDelay，不管前面舍弃了多少次操作，一旦时间tag>=mustRunDelay的话，执行函数一定会被调用一次。接下来上代码，更直观。

原文参考源代码出处

原文对于节流和防抖的描述有待商榷，但是最终的代码其实就是节流和防抖的综合体。通过是否传入mustRunDelay参数来区分。

function throttle (fn, delay, mustRunDelay = 0) {
  let timer = null;
  let tStart; //创建父级作用域时间tag
  return function () {
    const context = this;
    const args = arguments;
    const tCurr = +new Date();//子作用域时间tag
    clearTimeout(timer);//每次执行，先清空定时器，这步操作便是delay时间内舍弃多余操作的实现
    if (!tStart) { // 首次给时间tag赋值
      tStart = tCurr;
    }
    //这层判断就是判断是否达到强制执行的条件
    if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
      fn.apply(context, args);
      tStart = tCurr;
    } else {
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    }
  };
}

忽略throttle的方法名，按照调用方式不同，他也可以是debounce。主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间tag进行比较，用清空定时器的操作实现多余调用操作的舍弃。还有一点是用了闭包的机制，便于管理tStart变量，因为闭包的关系，tStart内存不会被回收，否则需要在全局定义该变量。

结尾

具体怎么用呢，拿scroll事件举个例子：

window.addEventListenr('scroll',throttle(scrollHandle,delay,mustRunDelay),false);

大概就这意思，使用时候根据场景使用，mustRunDelay>0？防抖：节流。