防抖函数在表单提交中用于防止重复请求，核心是将多次连续触发合并为最后一次执行；适用于用户操作结束后再响应的场景，比节流更契合一次性提交需求。
防抖函数在表单提交中主要用来防止用户因误操作或网络延迟反复点击提交按钮，从而避免重复请求。它的核心逻辑是：**将多次连续触发的事件合并为最后一次执行**，适用于“等用户操作真正结束再响应”的场景。
为什么表单提交适合用防抖而非节流
节流强调固定频率执行（如每秒最多一次），而表单提交是典型的“一次性动作”——用户点一次就该发一次请求，但要确保他没在 300ms 内连点两次。防抖能自然做到“只要还在点，就不发；停了才发”，更贴合业务语义。
- 用户快速双击提交按钮 → 只触发最后一次点击对应的请求
- 提交后按钮未及时置灰 + 网络慢 → 防抖可阻止二次提交，比单纯禁用按钮更健壮
- 配合 loading 状态使用，体验更平滑：防抖期间不发请求，也无需提前禁用按钮
一个轻量可用的防抖实现
不需要引入 Lodash，几行代码就能搞定：
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// 使用示例
const handleSubmit = debounce(() => {
fetch('/api/submit', { method: 'POST', body: new FormData(form) })
.then(res => res.json())
.then(data => console.log('提交成功', data));
}, 500);
注意：delay 设为 300–500ms 较合理，太短起不到防抖作用，太长会让用户觉得卡顿。
和按钮禁用、loading 状态配合更稳妥
防抖本身只控制函数执行时机，不改变 UI。建议结合视觉反馈提升体验：
- 点击后立即将按钮设为 disabled 或添加 loading 样式
- 请求完成后恢复按钮状态，无论成功或失败
- 若同时用了防抖，可在防抖回调里统一处理 loading 开关，避免竞态
要注意的边界情况
防抖不是银弹，需留意这些细节：
- 表单校验失败时不能防抖：应先校验，校验通过才进入防抖逻辑，否则用户输错后连点也不会提示
- 防抖函数需保持引用稳定：不要在 render 中重新定义，否则每次重渲染都会新建防抖函数，timer 失效
- 组件卸载时清理定时器：React 中可在 useEffect 清理函数里调用 clearTimeout，避免内存泄漏
