最有效方式是禁用提交按钮并配合状态锁，在submit事件中检查标志位防止重复提交，同时服务端校验唯一请求id实现幂等性。
最常用且有效的方式是：在表单提交时禁用提交按钮，并配合状态标记或防抖逻辑，确保同一表单只触发一次提交请求。
禁用提交按钮 + 状态锁
这是最简单直接的方案。用户点击后立即禁用按钮，并设置一个标志位防止 JS 层面重复调用 submit() 或触发事件处理函数。
- 监听表单的 submit 事件（不要只监听按钮 click），因为表单可通过回车等方式提交
- 在事件处理函数中，先检查是否已提交过（例如用 form.dataset.submitted = 'true' 或闭包变量）
- 若未提交，设为已提交、禁用所有提交按钮、再执行提交逻辑（如 AJAX 或原生 submit）
- 若使用 AJAX，建议在请求完成（无论成功失败）后恢复按钮，但需谨慎——失败时可能需要让用户重试
添加时间戳或唯一请求 ID（服务端协同）
前端限制只是第一道防线，关键还要靠服务端识别重复请求。前端可配合生成并携带唯一标识：
- 在表单首次提交前，生成一个 UUID 或时间戳 + 随机数，存入隐藏字段（如 ）
- 服务端收到后校验该 reqId 是否已处理过，避免幂等性问题
- 前端不依赖此 ID 做拦截，但它让服务端能安全拒绝重复提交
利用 fetch / axios 的 AbortController 防止并发
如果使用异步提交（如 fetch），可结合 AbortController 避免用户快速多次点击导致多个请求发出：
- 每次提交前创建新的 AbortController 实例，并保存引用
- 若已有待处理请求，先调用 abort() 中断它（可选，视业务而定）
- 将 signal 传入 fetch，确保旧请求真正终止
- 注意：abort 不会取消已发送到服务端的请求，仅中断前端响应处理
补充：避免常见陷阱
有些写法看似防重，实则无效：
- 只监听按钮 click 而忽略 submit 事件 → 回车提交仍会绕过
- 禁用按钮后没恢复，且没给用户反馈 → 用户以为卡死，反复刷新页面
- 用 setTimeout 延迟启用按钮 → 时间难控制，网络慢时仍可能重复
- 把防重逻辑写在表单外、未绑定到具体 form 元素 → 多个表单共用同一状态，互相干扰
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
