防抖点击按钮的核心是触发后禁用按钮并延迟执行，期间重复点击重置计时以拦截重复提交；需控制disabled状态、清理定时器、任务后恢复按钮，并注意移动端兼容与业务幂等校验。
防抖点击按钮的核心是：在用户触发点击后，暂时禁用按钮，并延迟执行实际操作，期间若再次点击则重置计时——这能有效拦截重复提交。
使用原生 JavaScript 实现防抖点击
适合轻量场景，不依赖框架。关键点是控制按钮的 disabled 状态与定时器的清理：
- 点击时立即设置
button.disabled = true，视觉上锁定按钮 - 用
setTimeout延迟执行真实逻辑（如表单提交、API 调用） - 每次新点击前先
clearTimeout上一个定时器，避免旧任务误触发 - 任务成功后手动恢复按钮状态（
button.disabled = false），或配合 Promise 在 finally 中统一恢复
Vue 项目中推荐的指令写法（v-debounce-click）
封装为自定义指令，复用性高、侵入性低：
- 指令接收一个函数（如
handleSubmit）和可选延迟时间（默认 500ms） - 在
mounted钩子中绑定点击事件，内部维护 timer 引用 - 触发时禁用按钮，清除旧 timer，新建延时任务；任务结束调用原函数并启用按钮
- 注意在
unmounted清理 timer，防止内存泄漏
React 中用 Hook 封装 useDebouncedClick
函数组件友好，逻辑内聚：
- 返回一个包装后的点击处理函数，自动管理 loading 状态
- 内部用
useState记录按钮是否禁用，用useRef存储 timer ID - 支持传入异步函数，自动在 pending 状态下禁用按钮，resolve/reject 后恢复
- 可结合
useCallback缓存，避免子组件重复渲染
注意事项与边界处理
防抖不是万能解，需结合业务判断：
- 表单提交类操作建议用防抖 + 按钮禁用，但支付等强一致性场景应服务端做幂等校验
- 避免过度延迟（如设 2s），影响用户体验；一般 300–600ms 较合理
- 用户连续快速点击时，只保留最后一次，但需确保最后一次确实被响应（检查 timer 是否被正确覆盖）
- 移动端还需考虑 touchstart / click 冗余触发，建议统一监听
click并禁用touch-action: manipulation
