防抖(Debounce)
通过定时器延迟执行函数,若在规定时间内重复触发事件则会重置定时器,直到事件停止触发后才会执行回调。其核心是「延迟执行,频繁触发时重置计时」
实现如下:
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
应用场景:输入搜索、页面窗口调整、提交按钮多次点击
节流(Throttle)
通过固定时间间隔执行函数,无论触发频率多高,回调函数在指定时间内最多执行一次。其核心是「限频执行,保证固定频率触发」
function throttle(func, wait) {
let lastTime = 0;
return (...args) => {
const now = Date.now();
if (now - lastTime > wait) {
func.apply(this, args);
lastTime = now;
}
};
}
应用场景:页面滚动、鼠标高频点击、鼠标拖拽
对比
防抖优先场景:用户明确停止后执行(如搜索)
节流优先场景:执行频率高但避免过高损耗(如动画渲染)