## 节流与防抖的本质 1. 节流与防抖，都是以闭包的形式存在 ## 节流（Throttle） 1. throttle 的中心思想在于：只允许一个函数在 X 毫秒内执行一次 2. 应用场景 - 监听滚动事件 ```javascript // fn是我们需要包装的事件回调, interval是时间间隔的阈值 function throttle(fn, interval) { let last = 0; // last为上一次触发回调的时间 // 将throttle处理结果当作函数返回 return function () { let context = this; // 保留调用时的this上下文 let args = arguments; // 保留调用时传入的参数 // 记录本次触发回调的时间 let now = +new Date(); // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值 if (now - last >= interval) { // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调 last = now; fn.apply(context, args); } }; } // 用throttle来包装scroll的回调 const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000) document.addEventListener('scroll', better_scroll) ``` ## Debounce： 最后一个人说了算 1. 防抖的中心思想在于：**触发后 **x 秒再执行回调。 2. 应用场景 1. 用户search，用防抖来限制请求资源 2. window触发resize ``` // fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间 function debounce(fn, delay) { // 定时器 let timer = null // 将debounce处理结果当作函数返回 return function () { // 保留调用时的this上下文 let context = this // 保留调用时传入的参数 let args = arguments // 每次事件被触发时，都去清除之前的旧定时器 if(timer) { clearTimeout(timer) } // 设立新定时器 timer = setTimeout(function () { fn.apply(context, args) }, delay) } } // 用debounce来包装scroll的回调 const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000) document.addEventListener('scroll', better_scroll) ```