防抖函数的核心是在用户停止触发操作后延迟执行目标函数，期间再次触发则重置计时器；支持非立即执行（适合提交/搜索）和立即执行（适合开关）两种模式，并需配合按钮禁用实现双重防护。
防抖函数的核心是：在用户停止触发操作（比如点击）后，等待一段固定时间再执行目标函数；如果期间再次触发，则重置计时器。这样能有效防止按钮被重复点击导致的重复提交、重复请求等问题。
基础防抖实现（带立即执行可选）
一个通用、可配置的防抖函数应支持「非立即执行」（默认）和「立即执行」两种模式：
- 非立即执行：点击后不马上执行，等用户停顿指定时间（如 300ms）后再执行一次 —— 适合表单提交、搜索请求等场景
- 立即执行：第一次点击立刻执行，后续点击在冷却期内会被忽略 —— 适合开关类操作（如展开/收起）
示例代码：
function debounce(func, wait, immediate = false) {let timeout;
return function executedFunction() {
const later = () => {
timeout = null;
if (!immediate) func.apply(this, arguments);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(this, arguments);
};
}
绑定到按钮点击事件的正确写法
直接在 onclick 或 addEventListener 中使用防抖函数，注意保持 this 和参数上下文：
立即学习“Java免费学习笔记（深入）”；
- 推荐用
addEventListener，避免内联事件覆盖 - 防抖函数需提前创建，不要每次点击都新建 —— 否则计时器无法共享，失去防抖效果
- 若需传参，用闭包或
bind，但更推荐在防抖函数内部通过arguments或箭头函数捕获
示例：
const handleClick = debounce(() => {console.log('提交中...');
// 调用 API 或表单提交逻辑
}, 500);
document.getElementById('submitBtn').addEventListener('click', handleClick);
结合按钮禁用状态更稳妥
仅靠防抖不能完全杜绝极端情况（如网络极慢、用户疯狂连点），建议叠加 UI 层防护：
- 点击后立即将按钮设为
disabled，并改变文字（如“提交中…”） - 请求完成（无论成功失败）再恢复按钮状态
- 防抖 + 禁用双保险，体验好、容错强
示例片段：
const submitBtn = document.getElementById('submitBtn');const handleSubmit = debounce(async () => {
submitBtn.disabled = true;
submitBtn.textContent = '提交中...';
try {
await api.submitForm();
} finally {
submitBtn.disabled = false;
submitBtn.textContent = '提交';
}
}, 300);
submitBtn.addEventListener('click', handleSubmit);
常见坑与注意事项
实际使用中容易忽略的关键点：
- 防抖函数返回的是新函数，必须保存引用，不能每次事件监听都调用
debounce(...) - 不要在 React 等框架的渲染函数里反复创建防抖函数，会导致监听器失效或内存泄漏
- 移动端要注意
touchstart和click的触发时机差异，通常监听click即可 - 若按钮本身有
type="submit"，记得在 handler 中调用event.preventDefault()防止默认提交
