防抖核心是“只响应最后一次点击”，需闭包存定时器、每次清除旧定时器、正确绑定this和参数；实际中应配合按钮禁用，关键操作则宜用节流+弹窗确认。
按钮高频点击用防抖限制，核心是“只响应最后一次点击”，适合防止重复提交、避免多余请求。但要注意：防抖本身不阻止点击动作，只是延迟并合并执行；若需立刻禁用交互，应配合按钮禁用逻辑。
防抖怎么写才真正生效
基础实现要满足三个关键点：闭包保存定时器、每次点击清除旧定时器、正确传递 this 和参数。
- 用 let timer = null 在闭包中持久保存定时器 ID，确保每次都能清除上一次的计时
- 点击回调里必须先 clearTimeout(timer)，再 setTimeout 新任务，否则计时不会重置
- 执行目标函数时用 func.apply(this, arguments)，保证 this 指向按钮元素，参数（如 event）也不丢失
按钮点击场景的典型代码示例
下面是一个可直接复用的防抖函数，用于点击事件：
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
const btn = document.querySelector('#submitBtn');
btn.addEventListener('click', debounce(() => {
console.log('请求已发出');
// 这里放你的接口调用或业务逻辑
}, 800));
设置 800ms 延迟后执行，意味着：用户连续猛点 5 次，只要两次点击间隔小于 800ms，就只触发最后一次。
防抖在点击场景的局限与补充
防抖解决的是“执行时机”问题，但不解决“视觉反馈”和“并发防护”。实际项目中建议组合使用：
-
点击即禁用按钮：
btn.disabled = true放在防抖回调内部开头，防止用户看到按钮仍可点而误操作 -
成功/失败后恢复按钮：在请求完成（无论 success 或 catch）里设
btn.disabled = false - 不适用所有场景：比如支付确认、删除弹窗等关键操作，更适合节流 + 禁用 + 弹窗二次确认，而非单纯防抖
什么时候该用节流而不是防抖
如果业务要求“单位时间内至少响应一次”，比如倒计时按钮、实时状态刷新，防抖会把中间所有点击都丢掉，此时应选节流：
- 节流保证每 1000ms 最多执行一次，不管用户点了几次
- 实现方式常用时间戳比对或开关标志位，比防抖更强调“保底响应”
- 例如：用户快速点击 10 次，节流可能执行第 1、第 2、第 3…次（按时间切片），而防抖只执行第 10 次
