必须在事件回调第一行同步设置 disabled 并 preventDefault；防连点不等于防抖，需 UI 层立即禁用、网络层 AbortController 控制、服务端幂等校验；失败时须手动恢复 disabled 状态，框架中应通过状态驱动而非直接操作 DOM。
button.disabled = true 必须写在事件开头
用户连点按钮时，真正要拦住的不是“第几次点击”，而是「鼠标松开那一帧触发的事件」。如果把 button.disabled = true 放在 fetch() 后面、then() 里，或等校验完成才设，那前几次点击早已发出请求。
常见错误包括：
- 用
setAttribute('disabled', 'true')—— 不触发原生表单拦截，也不等价于 DOM 属性赋值 - 只禁用某个 ID 按钮，但用户按回车或点另一个
type="submit"按钮，照样提交 - 没调
event.preventDefault()，禁用前表单已开始提交
正确做法是：在 submit 事件回调第一行，遍历所有 type="submit" 元素并设 disabled = true，同时调用 event.preventDefault()。
防连点 ≠ 防抖（debounce），别混用
防重复点击和防抖是两件事：前者针对「用户手快连点提交」，后者针对「输入框高频触发」。用 debounce 包裹按钮点击逻辑，反而会让用户觉得点不灵——因为第一次点击被延迟，而用户根本不知道它被卡住了。
立即学习“前端免费学习笔记（深入）”；
真实场景中二者常组合使用，但职责分明：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- UI 层：点击即设
disabled，视觉锁定 - 网络层：用
AbortController管理 fetch，避免多个请求并发 - 服务端：必须校验幂等性（如用
X-Request-ID去重），前端限制只是体验优化
失败后必须手动恢复 disabled 状态
请求失败、表单校验不通过、用户取消操作时，button.disabled 不能卡死。否则按钮永久不可点，用户只能刷新页面。
关键细节：
- 不要只在
finally里恢复 —— 如果用了AbortController.abort()，finally可能不执行 - 要在
catch分支明确设button.disabled = false - 注意
form.reset()会重置所有控件状态，包括把disabled恢复为初始值，导致防重失效
稳妥做法是：不用原生 reset()，改用 JS 手动清空字段 + 显式调用 button.disabled = false。
框架里别直接操作 DOM 的 disabled 属性
React、Vue 等框架中硬写 button.disabled = true，大概率被下一次 re-render 覆盖。状态必须走数据流驱动。
正确姿势：
- React：用
disabled={isSubmitting}，点击时先setIsSubmitting(true) - Vue：用
v-bind:disabled="isSubmitting"或:disabled绑定 - 注意
useCallback里没把isSubmitting加入依赖，会导致闭包读到旧值 - 异步中修改状态后忘记
await或.then()，disabled状态可能没及时更新
真正容易被忽略的是：禁用时机必须同步、恢复逻辑必须覆盖所有失败路径，而不仅仅是“成功就跳转”这种理想情况。
