### 简单了解 ***** * 防抖节流我相信大家都不陌生，简单理解，可有效的规避很多重复性（误）操作。 * 防抖：在规定时间内，操作时长间接性小于规定时间，只执行第一次或者最后一次；如：500ms执行一次，间接时间为100ms,一共操作时长2000ms，则会执行**1**次。 * 节流：规定时间内执行一次，操作时长大于规定时间，则开启下一个执行；如：500ms执行一次，一共操作时长2000ms，则会执行**4**次。 ### 问题所在 ***** 问题：`clearTimeout(timeout)`后，`timeout=???`、以及定时器有什么变化？ 先简单过一下 下面的代码，平淡无奇哈，但是关键在于这句 `timeout && clearTimeout(timeout)`，试想经过`clearTimeout(timeout)`后，`timeout=???`，等于`null`吗？可以看到清除定时器后timeout的值并非null，而且还不变，这是不是有点匪夷所思啊？ * 接下来我们分析一下，我们开启一个定时器，并且把这个定时器记录赋给一个变量，这时候定时器在内存中，可以通过该变量对应id去查找到，经过`clearTimeout(timeout)`后，只是对内存中的定时器进行清除，仅此而已，并未对变量进行修改操作； * 如果我们直接进行`timeout=null`，而没有`clearTimeout(timeout)`，那么定时器是没有清除的，只是把timeout指向变了，并没有清除掉定时器，此时定时器在内存中虽然没有变量指向它，但它仍存在内存中，待wait时间一到，就执行callback函数。  ### 防抖函数实现 ``` /**  * 防抖函数：多次触发事件，事件处理函数只执行一次，并且在触发操作后执行。  * 原理：利用闭包原理，就是函数需要在刚完成时需要被使用，赋值给一个变量，由这个变量去使用。  * @param {*} callback 回调函数  * @param {*} wait 延迟时间，默认500ms  * @param {*} immediate 是否立即执行，默认是  */ export const debounce = (callback, wait = 500, immediate = true) => {   let timeout = null;   let debounced = function() {     let self = this;     timeout && clearTimeout(timeout);     if (immediate) {       let callNow = !timeout;       if (callNow) callback.apply(self, arguments);       timeout = setTimeout(() => {         timeout = null;       }, wait);     } else {       timeout = setTimeout(() => {         callback.apply(self, arguments);       }, wait);     }   };   debounced.cancel = function() { clearTimeout(timeout);     timeout = null;   };   return debounced; }; ``` ### 节流函数实现 顺便附上节流函数 ``` /**  * 节流函数：触发操作后，在间隔连续时间内只执行一次，过了规定间隔时间后，才进行下一次调用  * 原理：对函数进行间隔操作，在规定间隔时间内，如有重复操作，则清除掉本次操作  * @param {*} callback  * @param {*} wait 间隔时间，默认500ms  * @param {*} options = { leading: false, // 禁用第一次执行 trailing: false // 禁用停止触发的回调 }  * @returns  */ export const throttle = (callback, wait = 500, options = {}) => {   let time, context, args;   let previous = 0;   let later = function() {     previous = options.leading === false ? 0 : new Date().getTime();     time = null;     callback.apply(context, args);     if (!time) context = args = null;   };   let throttled = function() {     let now = new Date().getTime();     if (!previous && options.leading === false) previous = now;     let remaining = wait - (now - previous);     context = this;     args = arguments;     if (remaining <= 0 || remaining > wait) {       if (time) {         clearTimeout(time);         time = null;       }       previous = now;       callback.apply(context, args);       if (!time) context = args = null;     } else if (!time && options.trailing !== false) {       time = setTimeout(later, remaining);     }   };   throttled.cancel = function() {     clearTimeout(time);     time = null;     previous = 0;   };   return throttled; }; ```