在JavaScript中，防抖（Debouncing）和节流（Throttling）是两种常见的优化技术，用来控制频繁触发事件时的执行频率，避免不必要的性能开销。
1. 防抖（Debouncing）
防抖的核心思想是延迟执行，直到事件触发停止一定时间后才执行函数。如果在延迟时间内事件再次触发，之前的定时会被清除，重新计时。防抖通常用于像搜索框输入、按钮点击等场景，避免每次输入时都触发请求。
示例：防抖
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
// 使用
const handleSearch = debounce(function (event) {
console.log('Searching:', event.target.value);
}, 300);
document.getElementById('search-input').addEventListener('input', handleSearch);
- 使用场景：搜索框输入、窗口大小变化（resize）、滚动事件等。
- 效果：只有在输入停止一定时间后，才会执行相应的操作。
2. 节流（Throttling）
节流的核心思想是限制函数执行的频率，即保证在规定时间内只执行一次，不管事件触发多少次。节流通常用于滚动、窗口调整大小等频繁触发的事件，避免连续执行带来性能问题。
示例：节流
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
lastTime = now;
fn(...args);
}
};
}
// 使用
const handleScroll = throttle(function () {
console.log('Scroll event triggered');
}, 200);
window.addEventListener('scroll', handleScroll);
- 使用场景：滚动事件、窗口大小变化（resize）、鼠标移动等。
- 效果：无论事件触发多少次，在规定的时间内最多只执行一次。
对比
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 触发条件 | 延迟执行，只有事件停止一定时间后才执行 | 固定时间内只执行一次 |
| 适用场景 | 输入框搜索、按钮点击等短时间内频繁触发 | 滚动、窗口调整大小等高频事件 |
| 实现方式 | 使用 setTimeout 来延迟执行 | 使用 setTimeout 或 Date.now() 来控制时间间隔 |
总结
- 防抖是防止一个事件被频繁触发，只有事件停止一段时间后才会执行。
- 节流是限制一个事件在单位时间内的执行次数，避免频繁执行导致性能问题。
两者都可以用来优化性能，具体选择哪个技术，取决于事件触发的场景。
