必须在所有退出路径（包括catch、finally、abort事件）中显式恢复按钮状态，禁用时需批量处理表单所有提交控件并保存原始文本，避免使用防抖而应采用请求锁与服务端幂等配合。
禁用按钮后没恢复，失败时用户就卡死了
直接写 btn.disabled = true 再不处理异常，是最常见的坑。请求 fetch 或 $.ajax 失败、超时、被 AbortController 中断时，按钮仍处于 disabled 状态，用户既看不到错误提示，也点不了重试——等于把操作权锁死了。
必须在所有退出路径里显式恢复按钮状态，包括 catch、finally、甚至 abort 事件监听中：
const controller = new AbortController();
const btn = document.querySelector('#submit-btn');
btn.addEventListener('click', async () => {
btn.disabled = true;
btn.textContent = '提交中…';
try {
await fetch('/api/submit', {
method: 'POST',
signal: controller.signal,
body: JSON.stringify(data)
});
} catch (err) {
if (err.name === 'AbortError') return;
alert('提交失败，请重试');
} finally {
btn.disabled = false; // 所有分支都走这里
btn.textContent = '提交';
}
});
只禁一个按钮，但表单里其实有多个提交入口
很多表单带“保存”“保存并继续”“另存为草稿”多个 button[type="submit"] 或带 onclick 的 input。只锁住当前点击的那个，用户转头点另一个，照样发请求。
正确做法是监听整个表单的 submit 事件，批量禁用所有提交控件：
立即学习“前端免费学习笔记（深入）”；
- 用
form.querySelectorAll('button[type="submit"], input[type="submit"], [data-submit]')覆盖自定义触发逻辑 - 禁用前先保存原始
textContent或value，避免恢复时文字错乱 - 别依赖
form.reset()自动恢复——它不重置disabled状态
防抖（debounce）不适合表单提交场景
用 setTimeout + clearTimeout 做防抖，常见于搜索框，但对表单提交有害：用户点一次没反应，再点一次才真正触发，体验断裂；且无法区分“网络慢”和“用户手快”，容易掩盖真实问题。
真正需要的是「请求锁」而非「点击锁」：
- 用
AbortController主动中断上一次未完成请求，而不是丢弃新点击 - 服务端必须配合幂等设计（如
submit_token），否则前端锁得再严，刷新页面重提仍是脏数据 - 键盘回车触发表单提交不受按钮
disabled影响，所以核心防护仍在服务端校验
Vue/React 组件里用 :disabled 绑定状态容易漏掉清理
在响应式框架里，:disabled="loading" 看似简洁，但 loading 变量常被多个异步操作共用。比如一个组件里同时有“提交表单”和“上传附件”两个请求，共用同一个 loading，就会互相干扰。
建议按操作粒度拆分状态：
- Vue：用
submitLoading和uploadLoading分开控制 - React：用
useState分别管理，或封装成useRequestLock('submit')这类 Hook - 避免在
useEffect或watch里自动设false——状态恢复必须由请求生命周期明确驱动
