前端函数防抖详解
在现代 Web 应用中，函数防抖（debounce）是一种常见且高效的性能优化手段，用于限制高频事件触发下的函数调用次数，从而减少不必要的计算、网络请求或 DOM 操作。咱们从'为什么使用防抖'切入，聊聊典型的应用场景，深入解析防抖原理，并给出从零实现到在实际项目中使用 Lodash 的完整代码示例。
为什么使用防抖
函数防抖的核心思想是在连续触发的事件停止后，仅执行最后一次调用，以避免频繁触发带来的性能问题（参考 MDN Web Docs）。
在不使用防抖的情况下，例如在 input 输入事件或 window.resize 事件中直接调用逻辑，页面可能会因短时间内大量调用而出现卡顿或请求风暴（参考 GeeksforGeeks）。通过防抖，可以让函数在用户停止输入、滚动或调整窗口大小后的一定延迟内才执行，极大提高资源利用效率并提升用户体验（参考 Medium）。
函数防抖的应用场景
-
输入框实时搜索建议 在用户输入关键词时触发搜索接口，若不加限制，每次
keyup都会发起请求，极易导致接口压力过大。使用防抖后，只在用户停止输入（如 300ms）后才发送请求，有效降低调用次数（参考自由代码营）。 -
按钮防连点 对于提交表单或支付按钮，连续点击可能导致多次提交。给点击事件绑定防抖函数，可在用户短时间内多次点击时只执行一次提交操作（参考 DEV Community）。
-
窗口大小调整（resize） 当页面布局需根据窗口大小实时计算或重绘时，
resize事件会频繁触发，添加防抖能减少重绘次数，提升性能（参考 Medium）。 -
滚动监听 结合无限滚动或懒加载，当用户滚动页面时应控制数据加载频率，避免重复请求或过度渲染（参考 Medium）。
函数防抖原理与手写实现
原理
防抖函数通过内部维护一个定时器 ID，每次调用时先清除之前的定时器，再启动一个新的延迟执行定时器；只有在最后一次调用后的延迟时间到达后，才真正执行目标函数（参考 GeeksforGeeks, Gist）。
手写实现
/**
* 简易版防抖函数
* @param {Function} func - 需要防抖的函数
* @param {number} wait - 延迟时间（毫秒）
* @returns {Function} - 防抖后返回的新函数
*/
function debounce(func, wait) {
let timeoutId;
// 声明定时器 ID
return function (...args) {
// 返回一个闭包函数
(timeoutId);
timeoutId = ( {
func.(, args);
}, wait);
};
}
