abortcontroller 阻止表单重复提交的核心是中止未完成的 fetch 请求，而非拦截点击；需配合 signal 使用、禁用按钮并清理控制器，且仅适用于 javascript 主动发起的请求（如 fetch），不支持原生 form submit。
用 AbortController 阻止表单重复提交，核心不是靠它直接“拦截多次点击”，而是配合 fetch 或其他支持 signal 的异步操作，在请求发出后、响应未返回前，主动中止上一次未完成的请求，避免多个并发请求同时进行。它不阻止按钮被点多次，但能确保只有最后一次点击的请求真正生效。
给 fetch 请求传入 abortSignal
表单提交通常走 fetch，而 fetch 支持 signal 选项。每次提交前创建新的 AbortController，把它的 signal 传进去；若上次请求还没结束，就先调用 abort() 中止它：
let controller = null;
function handleSubmit(e) {
e.preventDefault();
// 中止上一次请求（如果存在且未完成）
if (controller) controller.abort();
// 创建新控制器
controller = new AbortController();
const formData = new FormData(e.target);
fetch('/api/submit', {
method: 'POST',
body: formData,
signal: controller.signal // 关键：绑定中断信号
})
.then(res => res.json())
.then(data => {
console.log('提交成功', data);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消（正常）');
return;
}
console.error('提交失败', err);
});
}
禁用按钮 + 清除 controller 更稳妥
仅靠 abort() 不够直观——用户仍可连续点击。建议提交时禁用按钮，并在请求完成（无论成功或失败）后恢复按钮、清理控制器：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 点击后立即
button.disabled = true，视觉上阻断重复操作 - 请求结束后（
finally块里）设button.disabled = false - 同时将
controller设为null，避免内存泄漏或误 abort
注意：AbortController 不适用于普通表单 submit
如果你用的是原生 <form></form> 的 submit 行为（没阻止默认、没走 fetch），AbortController 完全无效——因为传统表单提交不接受 signal。必须改用 JavaScript 控制提交流程（e.preventDefault() + fetch 或 XMLHttpRequest）才能生效。
替代方案对比（简单场景可选）
对纯防重复提交，有时更轻量的方式也够用：
-
节流 + 状态标记：用布尔变量
isSubmitting控制是否允许发起请求 - 按钮 loading 状态：提交时显示 spinner，禁用按钮，响应后还原
-
AbortController的优势在于：能真正取消网络请求，节省带宽和后端资源，尤其适合搜索联想、高频输入等场景
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
