按钮重复点击需在事件回调首行同步设置 disabled=true，而非等待异步完成；失败后须在 catch/finally 中恢复 enabled；框架中应通过状态管理而非直接操作 dom；服务端幂等性是防重提交的最后一道防线。
按钮重复点击不是样式问题，是状态同步和事件时机没控住。最直接有效的做法，是在事件回调第一行同步设 button.disabled = true，而不是等 fetch 返回、校验通过或 loading 结束后再禁用。
为什么必须在事件回调第一行设 disabled=true
用户点下按钮到鼠标松开，整个过程不到 100ms；如果把 disabled = true 写在 fetch() 后面、.then() 里，或者依赖表单校验结果之后才执行，那前几次点击早已进入函数体——三个请求全发出去了，禁用形同虚设。
-
disabled必须写在事件处理函数开头，不加条件判断，不等异步操作 - 别用
setAttribute('disabled', 'true')，它不触发浏览器原生禁用逻辑，也不阻止表单 submit - 对
<button type="submit"></button>，光禁按钮不够，还得在form.addEventListener('submit', e => e.preventDefault())阻断回车提交路径
失败后按钮永远卡死是最常见线上事故
很多代码只在 .then() 里恢复 disabled = false，一旦接口返回 4xx/5xx、网络超时或用户手动 abort，finally 没写，按钮就再也不会变可点了。用户只能刷新页面，体验直接掉档。
- 所有异步链的
.catch()和.finally()分支都得包含btn.disabled = false - 如果用了
AbortController，abort 后也要恢复，不能只靠finally - 表单有
reset()方法时要注意：它会重置所有控件初始状态，包括把已禁用的按钮重新启用，得手动补锁或改用 JS 清空字段
React/Vue 里别直接操作 DOM 属性
框架组件中硬写 button.disabled = true 极易被下一次 re-render 覆盖，尤其当按钮是受控组件时。状态必须走框架的数据流，否则视觉和真实行为会脱节。
- React：用
useState管理isSubmitting，提交前setIsSubmitting(true)，Promise settle 后更新 - Vue：绑定
:disabled="isSubmitting"，在 methods 中修改响应式变量 - 不要混用：比如 Vue 模板里写了
v-bind:disabled，又在 JS 里直接赋值button.disabled，后者会被下次渲染冲掉
服务端幂等性才是最后一道防线
前端禁用只是体验优化，F5 刷新、DevTools 改属性、脚本调用 form.submit() 全都能绕过。真正防重靠后端——每个关键操作（下单、支付、评论）都必须校验是否已处理过。
- 客户端生成唯一
idempotency-key（如 UUID），每次请求带上 - 服务端用 Redis 缓存该 key 并设 10 分钟过期，重复提交直接拒
- 数据库写操作加唯一约束（如订单号唯一），配合
INSERT ... ON CONFLICT DO NOTHING
最容易被忽略的是：按钮禁用状态只存在内存里，用户刷新页面后一切重来；而服务端没做幂等校验，前端再严也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
