防抖和节流是前端优化高频事件的两种手段。防抖通过延迟执行并重新计时，确保连续触发后仅执行最后一次，适用于搜索输入等场景；节流则通过固定时间间隔执行一次，控制函数执行频率，适合滚动监听、鼠标移动等持续触发的场景。两者核心区别在于：防抖关注最终结果，节流保持稳定执行节奏。实际开发中应根据需求选择，输入类用防抖减少请求，滚动类用节流保留中间状态，也可结合使用。借助 Lodash 等工具库可简化实现，有效提升性能与用户体验。
在前端开发中，用户频繁触发事件（如窗口滚动、输入框输入、按钮点击）会导致函数被反复调用，影响页面性能甚至造成卡顿。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用来控制函数的执行频率，提升应用响应速度和用户体验。
什么是防抖（Debounce）
防抖的核心思想是：当事件被触发后，延迟一段时间再执行回调函数，如果在这段时间内事件再次被触发，则重新计时。只有在连续触发停止后达到设定的等待时间，函数才会真正执行一次。
适用于场景：
- 搜索框输入联想（避免每次输入都发请求）
- 表单重复提交防护
- 窗口大小调整后的布局重计算
实现方式示例：
function debounce(func, wait) {let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
使用时只需将目标函数和延迟时间传入，即可返回一个防抖版本的函数。
什么是节流（Throttle）
节流的原理是：在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。可以理解为“定期执行”，类似于节拍器。
适用于场景：
- 页面滚动监听（如懒加载、吸顶判断）
- 鼠标移动事件（如拖拽、画布绘制）
- 高频点击但需限制执行频率
实现方式示例（定时器版）：
function throttle(func, delay) {let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, delay);
}
};
}
此方法确保函数在每个时间窗口内至少执行一次，有效控制执行频率。
防抖与节流的区别
关键区别在于执行时机：
- 防抖：关注最后一次操作，适合“只关心最终结果”的场景
- 节流：保持稳定频率执行，适合“持续反馈”的场景
举例来说，用户快速输入5个字符，防抖会让搜索请求只在停止输入后发起一次；而节流可能在输入过程中每隔一段时间执行一次搜索，保证及时性。
实际应用建议
选择策略应根据具体需求：
- 输入类操作优先考虑防抖，减少无效请求
- 滚动、移动类事件推荐使用节流，避免丢失中间状态
- 可结合使用：先节流控制整体频率，内部再防抖处理细节
现代框架中也可借助 Lodash 等工具库提供的 _.debounce 和 _.throttle 方法，简化开发流程。
基本上就这些。掌握防抖和节流，能显著提升 JavaScript 的执行效率和用户交互体验，是性能优化中的基础但关键的一环。
