防抖(Debouncing)和节流(Throttling)是两种常用的优化技术,用于限制函数调用的频率,特别是在处理频繁触发的事件(如滚动事件、键盘输入事件、窗口大小调整事件等)时,可以显著提高性能和减少资源消耗。
防抖:编辑类似于王者荣耀的游戏回城,一直点是没有用的,只执行最后一次。
节流:类似于王者荣耀的技能冷却,点了之后一段时间再次点击是无效的。
防抖(Debouncing)
定义:
- 防抖是指在事件被触发后,延迟一段时间再执行函数。如果在延迟期间事件再次被触发,则重新计时。只有在延迟期间没有新的事件触发时,函数才会被执行。
应用场景:
- 搜索框输入,等待用户停止输入后再进行搜索。
- 窗口大小调整,等待用户停止调整窗口大小后再重新计算布局。
实现:
- 使用
setTimeout
来实现延迟执行,并在每次事件触发时清除之前的setTimeout
。
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 使用示例
const handleResize = debounce(() => {
console.log('Window resized');
}, 300);
window.addEventListener('resize', handleResize);
节流(Throttling)
定义:
- 节流是指在一定时间内只执行一次函数。即使事件被频繁触发,函数也只会按固定的时间间隔执行。
应用场景:
- 滚动事件,限制滚动事件的处理频率,避免性能问题。
- 按钮点击,防止用户短时间内多次点击导致重复操作。
实现:
- 使用
setTimeout
来控制函数的执行频率,并在每次事件触发时检查是否已经有一个定时器在运行。
function throttle(func, wait) {
let timeout = null;
return function(...args) {
if (!timeout) {
timeout = setTimeout(() => {
func.apply(this, args);
timeout = null;
}, wait);
}
};
}
// 使用示例
const handleScroll = throttle(() => {
console.log('Scrolled');
}, 300);
window.addEventListener('scroll', handleScroll);
防抖:在事件被触发后延迟一段时间执行函数,如果在延迟期间事件再次被触发,则重新计时。适用于等待用户停止操作后再执行的场景。
节流:在一定时间内只执行一次函数,即使事件被频繁触发。适用于需要限制事件处理频率的场景。
这两种技术都可以通过setTimeout
来实现,具体选择哪种技术取决于应用场景和需求。