节流

如果你在日常开发中，在滚动事件或者窗口resize事件时需要做一个复杂的计算，如果不限制事件处理函数调用的频率，会加重浏览器的负担，造成性能浪费甚至页面卡顿。此时我们可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果，本文主要讲解节流。

所谓节流，就是事件一直被触发的话，第一次触发立即执行，接下来每隔一段时间才会触发一次。

接下来我们理一下思路：

1. 该函数要有一个参数为事件合理触发后要调用的函数,我们定义为fn；

2. 第二个参数为调用该函数的对象，即函数执行时的this指向，我们定义为context；

3. 第三个参数为调用该函数时要传入的参数，我们定义为数组args;

4: 第四个参数为延迟时间，我们定义为delay;

注：函数内部我们还会给fn定义一个属性，用来接收setTimeout的fn.throttleTimerId

代码如下：

let throttle = (fn,context,args,delay=500) => {
  // 每次事件触发，如果存在fn.debounceATimerId，则结束函数执行，以此限制函数调用频率
  if(fn.throttleTimerId){
    return;
  }else{
    // 调用fn,并绑定this为context,参数为args
    fn.apply(context,args);
    // 设置delay毫秒后清除fn.throttleTimerId,以保证函数可以再次被调用
    fn.throttleTimerId=setTimeout(() => {
      fn.throttleTimerId = null;
    },delay)
  }
};
复制代码

如果有错误或者不严谨的地方，请给予指正，十分感谢！