防抖和节流

1.防抖

• 是什么
  就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  （防止事件回调频繁执行，一般只执行最后一次。）
• 代码
  1.非立即执行版本

// 这个是非立即执行版本
const debounce = function (func, delay) {
    let timer = null
    return function () {
        if (timer) clearTimeout(timer)
        const args = arguments;
        const context = this; // 这里就是触发事件的dom元素了
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay)
    }
}

 const args = arguments;
 const context = this; // 这里就是触发事件的dom元素了

这两行代码，一个是保证传入的回调能接受到事件对象参数（e）。一个是保证回调里的this依然指向绑定事件的dom元素。这两个很重要。

2.立即执行版本。（刚开始执行一次，后面停止触发事件后，再执行一次。）

// 立即执行版本
const debounceImmediate = function (func, delay) {
   let timer = null
   let isOperate = true 
   return function () {
       if (timer && !isOperate) {
           clearTimeout(timer)
       }
       if(timer && isOperate) return
       const args = arguments;
       const context = this; // 这里就是触发事件的dom元素了
       timer = setTimeout(() => {
           func.apply(context, args);
           isOperate = false
       }, delay)
   }
}

2.节流

• 是什么
  所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。

• 代码

const throttle = function (func, delay) { // 节流
  let timer = null;
  return function () {
      const context = this; // 这里一般就是触发事件的dom元素了
      const args = arguments;
      if (timer) return;
      timer = setTimeout(() => {
          func.apply(context, args);
          timer = null;
      }, delay);
  };
};