简介
以下场景往往由于事件频繁被触发,因而频繁执行 DOM 操作、资源加载等重行为,导致 UI 停顿甚至浏览器崩溃。
window 对象的 resize、scroll 事件
拖拽时的 mousemove 事件
射击游戏中的 mousedown、keydown 事件
文字输入、自动完成的 keyup 事件
实际上对于 window 的 resize 事件,实际需求大多为停止改变大小 n 毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了 debounce 和 throttle 两种解决办法。
与函数去抖(debounce)
当调用动作 n 毫秒
后,才会执行该动作,若在这n 毫秒
内又调用此动作则将重新
计算执行时间。
1 | /** |
实例
调用 onresize 函数,我们不需要触发频率这么快,要让函数执行延迟 500 毫秒再执行。
1 | var count = 0; |
参考 v1.9.1 的 Underscore.js debounce
1 | // Returns a function, that, as long as it continues to be invoked, will not |
函数节流(throttle)
预先设定一个执行周期
,当再次调用动作的时刻
大于等于执行周期
则执行该动作,然后进入下一个新周期。
1 | /** |
实例
和防抖一样调用 onresize 函数
1 | var count = 0; |
参考 v1.9.1 的 Underscore.js throttle
1 | // Returns a function, that, when invoked, will only be triggered at most once |