在前端开发中会遇到一些频繁的事件触发,例如input,keyup,keydown,scroll,resize,mousemove等,这非常影响性能,所以我们需要控制它们触发的频率,方法就是防抖与节流。
- 防抖
防抖的原理就是:要等你触发完事件 n 秒内不再触发事件,我才执行。function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function () { func.apply(context, args) }, wait); } }
- 节流
节流的原理很简单:如果你持续触发事件,每隔一段时间,只执行一次事件。
有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。- 定时器实现
特点:会在 n 秒后第一次执行,事件停止触发后依然会再执行一次事件
function throttle(func, wait) { var timeout; return function () { var context = this; var args = arguments; if (!timeout) { timeout = setTimeout(function () { func.apply(context, args) timeout = null; }, wait) } } }
- 时间戳实现
特点:第一次事件会立刻执行,停止触发后没有办法再执行事件
function throttle(func, wait) { var previous = 0; return function () { var now = Date.now(); var context = this; var args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } }
- 定时器实现
- 参考
JavaScript专题之跟着underscore学节流
JavaScript专题之跟着underscore学防抖