为什么使用防抖
函数防抖的核心思想是在连续触发的事件停止后，仅执行最后一次调用，以避免频繁触发带来的性能问题 (MDN Web Docs)。在不使用防抖的情况下，例如在 input 输入事件或 window.resize 事件中直接调用逻辑，页面可能会因短时间内大量调用而出现卡顿或请求风暴 (GeeksforGeeks)。通过防抖，可以让函数在用户停止输入、滚动或调整窗口大小后的一定延迟内才执行，极大提高资源利用效率并提升用户体验 (Medium)。
函数防抖的应用场景
- 输入框实时搜索建议
在用户输入关键词时触发搜索接口，若不加限制，每次
keyup都会发起请求，极易导致接口压力过大。使用防抖后，只在用户停止输入（如 300ms）后才发送请求，有效降低调用次数 (FreeCodeCamp)。 - 按钮防连点 对于提交表单或支付按钮，连续点击可能导致多次提交。给点击事件绑定防抖函数，可在用户短时间内多次点击时只执行一次提交操作 (DEV Community)。
- 窗口大小调整（resize）
当页面布局需根据窗口大小实时计算或重绘时，
resize事件会频繁触发，添加防抖能减少重绘次数，提升性能 (Medium)。 - 滚动监听 结合无限滚动或懒加载，当用户滚动页面时应控制数据加载频率，避免重复请求或过度渲染 (Medium)。
函数防抖原理与手写实现
原理
防抖函数通过内部维护一个定时器 ID，每次调用时先清除之前的定时器，再启动一个新的延迟执行定时器；只有在最后一次调用后的延迟时间到达后，才真正执行目标函数 (GeeksforGeeks, GitHub Gist)。
手写实现
/**
* 简易版防抖函数
* @param {Function} func - 需要防抖的函数
* @param {number} wait - 延迟时间（毫秒）
* @returns {Function} - 防抖后返回的新函数
*/
function debounce(func, wait) {
let timeoutId;
// 声明定时器 ID
return function (...args) {
// 返回一个闭包函数
clearTimeout(timeoutId);
// 清除上一次定时器
timeoutId = setTimeout(() => {
// 启动新的定时器
func.apply(this, args);
// 延迟执行目标函数
}, wait);
};
}
上述代码利用 JavaScript 闭包，让每个防抖函数维护独立的 timeoutId，在多次调用时只有最后一次延迟结束后触发 (Stack Overflow)。
使用 Lodash 的 _.debounce
在实际项目中，为了减少手写错误并获得更丰富的功能（如 leading、trailing、cancel、flush 等选项），推荐使用成熟的工具库 Lodash 的 _.debounce 方法 (Lodash)。
# 安装 lodash.debounce 子模块
npm install lodash.debounce
import debounce from 'lodash.debounce';
/**
* 在搜索框中使用防抖
* 当用户停止输入 300ms 后才触发搜索
*/
const searchInput = document.getElementById('search');
function onSearch(query) {
// 发送搜索请求
console.log('搜索关键词：', query);
}
const debouncedSearch = debounce(onSearch, 300, {
leading: false,
trailing: true
});
searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});
leading: 是否在延迟开始前调用一次，默认false。trailing: 是否在延迟结束后调用一次，默认true。- 返回的函数还拥有
cancel()和flush()方法，可在需要时取消或立即执行待定调用 (GeeksforGeeks)。
完整示例：防抖搜索组件
下面给出一个完整的示例，包括 HTML、样式与 JavaScript 代码，你可以直接复制运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Debounce Demo</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
}
#results {
margin-top: 1rem;
}
.item {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<h1>Debounce 搜索示例</h1>
<input id="search" type="text" placeholder="输入关键词…" autocomplete="off" />
<div id="results"></div>
<script =>
结语
函数防抖是前端性能优化中的一项基础技术，适用于各种需要限制高频事件调用的场景，通过简单的定时器逻辑或成熟的 Lodash 工具库，就能快速落地。掌握防抖和其'兄弟'节流（throttle），能让你的应用在面对频繁用户交互时依然保持流畅、稳定。欢迎在项目中实践并根据业务需求调整参数，实现更灵活的性能优化。
