防抖是事件停止触发一段时间后执行最后一次回调，节流是在固定时间间隔内最多执行一次。防抖适用于搜索输入、resize等“操作结束后响应”场景；节流适用于滚动、鼠标移动等“需持续但限频响应”场景。
防抖（Debounce）和节流（Throttle）是 JavaScript 中处理高频事件的两种经典优化策略，核心目标都是减少函数实际执行次数，避免性能浪费或逻辑错误。它们的区别在于触发时机和执行频率的控制逻辑不同。
防抖：等“停”了再执行
防抖指在事件被频繁触发时，只执行最后一次触发后的回调。它会重置计时器，直到事件停止触发一段时间后才真正执行。适合用于搜索框输入、窗口大小调整后重新布局等场景——用户操作还没结束，就不着急响应。
实现要点：
- 每次触发都清除上一次的定时器
- 重新设置新的延时执行
- 可选支持立即执行（首次触发立刻运行，后续连续触发则仍按防抖逻辑）
- 基础防抖（非立即执行）：
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
- 带立即执行选项的防抖：
let timeout;
return function(...args) {
if (immediate && !timeout) {
func.apply(this, args);
}
clearTimeout(timeout);
timeout = setTimeout(() => {
if (!immediate) {
func.apply(this, args);
}
timeout = null;
}, wait);
};
}
节流：固定节奏执行
节流指在指定时间间隔内，最多执行一次函数。即使事件持续触发，也保证函数以稳定频率运行。适合鼠标移动、滚动监听、游戏帧更新等需要持续反馈但不必每帧都处理的场景。
实现方式主要有两种：
- 定时器节流（推荐）：用定时器控制下一次可执行时机
- 时间戳节流：记录上次执行时间，每次触发对比当前时间是否超过间隔
- 定时器节流（更稳定，避免漏掉最后一次）：
let timeout = null;
return function(...args) {
if (!timeout) {
timeout = setTimeout(() => {
func.apply(this, args);
timeout = null;
}, wait);
}
};
}
- 时间戳节流（简单，但可能丢失结尾触发）：
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous >= wait) {
func.apply(this, args);
previous = now;
}
};
}
怎么选？关键看业务需求
防抖适用于“等用户做完再说”的场景，比如：
- 输入框搜索建议（用户打完字再发请求）
- 窗口 resize 后重新计算布局（等拖拽结束再渲染）
节流适用于“必须持续响应但不能太密”的场景，比如：
- 滚动加载（每滚动一段距离检查是否触底）
- 鼠标跟随效果（限制绘制频率，防止卡顿）
- 游戏中的按键响应（避免连点过快导致逻辑异常）
实际应用小贴士
真实项目中要注意几点：
- 记得保存返回的防抖/节流函数引用，避免重复绑定造成多个闭包
- 在组件卸载或事件解绑前，清理定时器（尤其是防抖）防止内存泄漏
- 使用箭头函数时注意 this 绑定问题，建议统一用 func.apply(this, args)
- 现代开发中可借助 Lodash 的 _.debounce 和 _.throttle，它们已处理了取消、取消后恢复、最大等待时间等边界情况
