JS使用防抖和节流来减少影响性能的因素
什么是防抖和节流
在前端开发中会遇到一些频繁的事件触发,例如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;
}
}
}