理解防抖（Debounce）与节流（Throttle）
防抖（Debounce） 是一种延迟执行机制：当某一高频操作持续触发时，只有在触发停止后的特定时间之后才执行函数；若期间再次触发，则重新计时。常用于减少不必要的调用次数，提升性能。
节流（Throttle） 是一种限频执行机制：控制函数在一定时间内只能运行一次，不管触发频率有多高。适合均匀限制执行频率，从而稳定性能。
两者的核心差异可归纳为：
- 防抖更关注“事件结束后再执行”。
- 节流更关注“设定间隔内只允许一次执行”。
典型应用场景与使用推荐
防抖适用场景：
- 输入框输入提示（如搜索建议）—等用户停止输入后再发送请求。
- 表单自动保存、窗口调整大小（resize）—等待用户操作结束再响应。
节流适用场景：
- 滚动加载（scroll）—避免多次触发资源加载。
- 鼠标移动（mousemove）、画布绘制（canvas）、拖拽操作—按间隔采样执行，提高流畅度和性能。
JavaScript 封装实现示例
防抖函数封装（基础写法）：
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
这个版本旨在确保函数在触发停止后 wait 毫秒才会执行。
节流函数封装（基础写法）：
function throttle(func, wait) {
let canRun = true;
return function(...args) {
if (!canRun) return;
canRun = false;
func.apply(this, args);
setTimeout(() => {
canRun = true;
}, wait);
};
}
此写法可控制函数每 wait 毫秒最多执行一次。
可以选择更复杂的节流版本，如基于时间戳或定时器的“有头无尾”“有尾无头”实现，也可以组合出“有头有尾”的节流策略。
最佳实践与注意事项
避免重复声明：确保防抖/节流函数只创建一次，绑定事件时不构造新函数，否则效果无效。
合理选定延迟时间：延迟时间过短效果有限，过长则可能导致用户体验下降。需针对场景调优，可通过测试或 A/B 实验获得最佳值。
React 或框架中使用：在 React 中应结合 useRef 或 useCallback 等机制保持函数引用稳定，避免每次渲染都重新生成新实例，导致性能和效果问题。
总结实用建议
- 明确需求选择工具：想等输入停下再执行用防抖，要平滑控制频率用节流。
- 封装与精简代码：使用上述简洁函数封装函数逻辑，便于多处复用。
- 调优用户体验：延迟值与业务场景结合设计，确保效率与响应流畅平衡。
- 结合框架正确使用：在 React、Vue 等框架中保持函数引用的一致性，避免性能回退。
通过了解防抖与节流的原理、场景和封装方法，以及避坑和调优建议，你可以在前端项目中灵活使用这两种策略，显著提升交互性能与用户体验。