事件触发控制_前端性能优化：事件的节流throttle与防抖debounce

scroll 事件是一个非常容易被反复触发的事件，另外，resize 事件、鼠标事件(比如 mousemove、mouseover 等)、键盘事件(keyup、keydown 等)都存在被频繁触发的风险。

频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttle(事件节流)和 debounce(事件防抖)出现了。

(闭包形式实现，即返回的是一个函数)

throttle：

// fn是我们需要包装的事件回调, interval是时间间隔的阈值function throttle(fn, interval) { // last为上一次触发回调的时间 let last = 0 // 将throttle处理结果当作函数返回 return function () { // 保留调用时的this上下文 let context = 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：(有定时器)

// 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)

---

用 Throttle 来优化 Debounce

debounce 的问题在于它“可以一等再等”。试想，如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。

为了避免弄巧成拙，需要借力 throttle 的思想，打造一个“有底线”的 debounce——等待可以，但必须有原则：delay 时间内，可以为不断重新生成定时器；但只要delay的时间到了，必须要给用户一个响应。

// fn是我们需要包装的事件回调, delay是时间间隔的阈值function throttle(fn, delay) { // last为上一次触发回调的时间, timer是定时器 let last = 0, timer = null // 将throttle处理结果当作函数返回 return function () {  // 保留调用时的this上下文 let context = this // 保留调用时传入的参数 let args = arguments // 记录本次触发回调的时间 let now = +new Date() // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值 if (now - last < delay) { // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器 clearTimeout(timer) timer = setTimeout(function () { last = now fn.apply(context, args) }, delay) } else { // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应 last = now fn.apply(context, args) } }}// 用新的throttle包装scroll的回调const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)document.addEventListener('scroll', better_scroll)