防抖和节流

• 当回调函数开销较大时，这样很浪费性能，比如页面有多个echarts图表，页面resize时，echarts也resize。上代码：

window.onresize = function(){
  console.log("页面resize了")
}

GIF 2020-4-8 11-19-31.gif

可以看到，窗口大小变化不大，但resize执行了51次。这里只是console了一个信息，如果是开销较大的回调的话，体验非常不好

1.防抖（防止频繁触发事件时，频繁调用回调函数）

• 防抖的实现方式，用人话讲，就是当事件触发时，在设定好时长后调用回调函数，如果在这期间又触发了，那么清空上一次的定时器，重新计时，只有在定时器期间没有再次触发事件的话，才会执行函数。

上代码：

    function debounce(fn, wait, immediate) {  //原函数， 间隔wait， 是否立即执行
      let timer, result;
      var debounced = function () {
        let context = this;  // 保存执行环境
        if (timer) clearTimeout(timer);  //在定时器期间再次执行时，清空掉上次的定时器
        if (immediate) { //立即执行（只有前执行，即事件初始触发时）
          let callNow = !timer;  //是否执行过
          timer = setTimeout(() => { 
            timer = null;
          }, wait);
          if (callNow) {  //如果从未执行过，立即执行
            result = fn.apply(context, arguments);
          }
        } else {
          timer = setTimeout(() => {  // 如果不是立即执行，间隔wait后，执行回调（后执行，动作彻底完毕后才执行）
            fn.apply(context, arguments)
          }, wait)
        }
        return result;
      }
  //如果用户传入了immediate，那么只有前执行，即执行完毕后，在wait之内没有在触发过事件的话，才能再执行。因此，此处加个cancel，方便用户自己取消这个机制
      debounced.cancel = function () { 
        timer = undefined;
        result = undefined;
      }
      return debounced;
    }

2.节流

• 节流采用另一种优化方式，顾名思义，在频繁触发事件时，并不是每次都执行，而是一用户设置的时长分段，到达这个时长，执行一次，达到节流的目的。

//第一种实现方式
function throttle(fn, wait) {  //前执行
      let previous = 0;
      return function () {
        let now = +new Date();
        let context = this;
        if (now - previous > wait) {
          fn.apply(context, arguments);
          previous = now;
        }
      }
  }
// 第二种方式
   function throttle(fn, wait) {  //后执行
      let timer;
      return function () {
        let context = this;
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            fn.apply(context, arguments);
          }, wait)
        }
      }
    }
//