防抖函数通过重置定时器确保只有最后一次点击触发执行，核心是每次调用先clearTimeout再setTimeout；需预先定义防抖函数绑定事件，支持immediate选项实现首次立即执行；不可替代服务端幂等校验。
防抖函数能有效拦截按钮重复提交，核心思路是：用户每次点击时重置定时器，只让最后一次点击在延迟结束后执行。
防抖函数的基本实现
一个标准的防抖函数接收两个参数：要执行的函数和等待时间（毫秒）。点击按钮时，先清除上一次的定时器，再启动新的定时器。
- 使用 setTimeout 延迟执行目标函数
- 每次调用都先 clearTimeout 清除之前的定时器
- 确保只有最后一次点击触发实际操作（如发请求）
按钮提交场景下的典型用法
给表单按钮绑定防抖处理，避免用户快速连点导致多次请求。注意要把原提交逻辑封装进防抖函数里，而不是直接在 onclick 里写 setTimeout。
- 不要在 HTML 中写
onclick="debounce(submitForm, 500)"—— 这样每次点击都新建一个防抖实例，无法清除前次定时器 - 推荐在 JS 中预先定义防抖后的函数：
const safeSubmit = debounce(submitForm, 800)，再绑定到按钮 click 事件 - 如果表单支持回车提交，也要对
submit事件做同样防抖处理
带立即执行选项的增强版防抖
有些场景需要首次点击立刻执行（比如搜索框“搜一下”按钮），之后再进入防抖节奏。这时可加一个 immediate 参数控制行为。
- 设置
immediate: true时，第一次调用立即执行，后续调用按延迟执行 - 适合“确认类”按钮（如删除、支付），用户点下去要有即时反馈，但防止手抖连点
- 需额外维护一个 timer 状态变量，并在立即执行后清空定时器
注意事项和常见坑
防抖只是前端体验优化，不能替代服务端幂等性校验。实际项目中必须配合后端唯一请求 ID 或 token 验证。
- 别把防抖和节流混用 —— 节流是固定间隔执行，适合滚动监听；防抖是“等停了再干”，适合提交类操作
- 防抖函数内部要正确绑定 this 和传递 arguments，可用
func.apply(this, args) - Vue/React 中注意组件卸载时清理定时器，避免内存泄漏或报错
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
