按钮高频点击时自动锁定的本质是立即禁用按钮并同步视觉反馈，须在click回调首行执行button.disabled = true，配合finally/catch重置状态，且submit按钮需额外拦截form.onsubmit。
按钮高频点击时自动锁定，本质是控制点击事件的触发节奏。最直接有效的做法不是“拦截点击”，而是让每次点击后主动拒绝后续点击，直到上一次操作完成或冷却时间结束。
button.disabled = true 必须写在 click 回调第一行
很多开发者把 button.disabled = true 放在 fetch() 或 setTimeout() 里，结果用户连点三下，发出去三个请求——因为禁用动作没赶在事件触发的瞬间执行。
- 必须在
addEventListener('click', ...)或onclick函数体的第一行就设button.disabled = true - 如果用了
async/await，也要确保disabled = true在await前执行，否则 await 等待期间仍可点击 - 别用
button.setAttribute('disabled', 'true')—— 它不触发表单提交拦截，且在某些浏览器中无法阻止键盘回车提交
节流（throttle）和防抖（debounce）不适合按钮锁定场景
节流和防抖常被误用于按钮防重复，但它们解决的是「事件频率控制」，不是「操作原子性保障」。按钮点击是一次性意图，用户不希望它被“延迟执行”或“合并执行”，只希望“点了就生效，之后不能再点”。
-
throttle会让用户觉得点击没响应（比如 1 秒内只允许一次，第二次点击被丢弃） -
debounce更糟：用户点完等半天才触发，体验断裂 - 真正需要的是“立即响应 + 立即封锁”，而不是调度策略
错误恢复必须显式处理
禁用按钮后，如果后续逻辑出错（如网络失败、校验不通过），按钮会永远卡死。不能依赖“自然恢复”，必须手动重置状态。
- 在
catch或finally块里写button.disabled = false - 如果用了
fetch()，注意400、500响应不会进catch，需手动检查response.ok - 避免只在
.then()里恢复 —— 成功路径才走那里，失败路径就漏了
submit 类型按钮要额外监听 form.onsubmit
<button type="submit"></button> 或回车触发表单提交时，仅靠按钮 click 事件禁用是不够的。用户可能绕过按钮直接按 Enter，导致重复提交。
- 必须同时给
<form></form>绑定onsubmit，并在回调第一行做e.preventDefault()和submitButton.disabled = true - 不要在
onsubmit里调form.submit()—— 这会跳过该钩子，失去控制权 - 视觉反馈也要同步：CSS 中
button:disabled至少包含opacity: 0.6、cursor: not-allowed、background-color变暗
最容易被忽略的是状态持久性：页面刷新后，按钮禁用状态消失，但业务可能还没完成（比如上传中断）。这种情况下，仅靠前端内存变量无法保证一致性，得结合服务端状态或 localStorage 标记，否则用户刷新页面又点一次，后端就得处理幂等逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
