防抖与节流
防抖(Debounce)
防抖是指在一定时间内，无论触发多少次事件，都只执行最后一次操作。简单来说，就是当事件被频繁触发时，只有在一定时间间隔内没有再次触发事件，事件处理函数才会执行一次。
应用场景：
- 搜索框输入联想（等待用户停止输入后再发送请求）
- 窗口大小调整（等待调整结束后再计算布局）
- 表单验证（用户停止输入后再验证）
实现原理：
function debounce(func, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
节流(Throttle)
节流是指在一定时间内，无论触发多少次事件，都只执行一次操作。简单来说，就是稀释事件的执行频率，保证一定时间内只执行一次。
应用场景：
- 滚动加载更多（间隔一定时间检查位置）
- 按钮频繁点击（防止重复提交）
- 鼠标移动事件（降低事件触发频率）
实现原理：
function throttle(func, delay) {
let lastTime = 0;
return function() {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, arguments);
lastTime = now;
}
};
}
区别
| 特性 | 防抖 | 节流 |
|---|---|---|
| 执行时机 | 最后一次触发后延迟执行 | 固定间隔执行 |
| 执行次数 | 只执行一次 | 按固定频率执行 |
| 响应速度 | 延迟响应 | 即时响应但频率受限 |
| 适用场景 | 关注结果不关注过程 | 需要均匀执行 |
防抖不是节流
防抖和节流是两种不同的技术，虽然它们都用于优化高频事件的性能，但实现原理和应用场景不同。防抖关注的是"最后一次"，而节流关注的是"固定间隔"。
