js中性能优化之函数节流

定义

  限制在规定时间内只触发一次函数执行，将多余的触发给忽略掉。
  也可以直接理解节流就是节省流量（代码执行开销），将原本高频率的操作降低到我们设置的时间频率内执行。

适用场景

从定义可知节流主要是降低函数执行的频率，节省执行开销的同时并且不耽误正常的功能实现，所以它所适用的大多数就是那种触发频率极高的场景，如果我们不做处理并且触发的函数里面有一些开销比较大的操作（如大量操作dom或者进行ajax请求等）可能会造成浏览器性能阻塞造成卡顿。例如：

1、 浏览器窗口变化事件 window.onresize
浏览器窗口的大小在改变的时候onresize 事件触发的频率非常高.

2、 mousemove事件
当我们绑定了拖拽事件，进行拖拽的时候该事件同样也会被频繁的触发。

3、 scroll事件
窗口的滚动事件当进行滚动的时候也会被频繁的触发。

实现原理

从上述可知导致问题的原因就是因为函数被触发的频率太高导致，做了需要不必要的操作，所以我们只需要人为的将触发的频率降低到合适的频率即可。例如在拖拽事件进行的时候，想要进行发起请求可能一秒钟发一次或者两次就足以实现功能，那么我们就可以根据时间忽略掉其他不必要的请求。

代码实现

于函数节流的代码实现有许多种，下面将使用setTimeout 定时器延迟一段时间执行来实现。具体代码如下：

/**
 *
 * @param {*} callback 需要执行的函数
 * @param {*} time 函数执行的间隔
 *
 */
 
  const saveTraffic = (callback, time) => {
    let timer,
      firstTime;
    
    return function(...res) {
      const _this = this;
 
      // 第一次调用直接执行即可
      if (firstTime) {
        callback.apply(_this, res);
        return firstTime = false;
      };
 
      if (timer) return;
 
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        callback.apply(_this, res);
      }, time || 500)
    }
  }
 

上述代码中将即将被执行的函数用 setTimeout 定时器延迟一段时间执行，如果该次延迟执行还没有完成，则忽略接下来调用该函数的触发。

测试

  window.onresize = saveTraffic(function(res) {
    console.log(1111, res)
  }, 300);