在前端开发中会遇到一些频繁的事件触发,例如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);
}
}
节流
节流的原理很简单:如果你持续触发事件,每隔一段时间,只执行一次事件。
有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。
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;
}
}
}
时间戳实现
特点:第一次事件会立刻执行,停止触发后没有办法再执行事件
定时器实现
特点:会在 n 秒后第一次执行,事件停止触发后依然会再执行一次事件
作者:tiancai啊呆
链接:https://www.jianshu.com/p/352993c3b1c4
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2766/viewspace-2810110/ ,如需转载,请注明出处,否则将追究法律责任。