按钮防重复点击必须在click回调首行设button.disabled = true，搭配finally恢复状态；表单需监听onsubmit并preventdefault；debounce不替代禁用，仅作辅助。
disabled 属性必须在 click 事件回调第一行就设，否则防不住连点；debounce 适合高频触发场景，但无法阻止表单回车提交——两者不是替代关系，而是配合使用。
button.disabled = true 必须写在事件开头
很多开发者把禁用逻辑放在 fetch().then() 里，结果用户点两下，两个请求都发出去了。真正要拦的是「第一次点击后、异步还没开始前」的那几十毫秒窗口。
-
button.disabled = true是唯一可靠写法，别用setAttribute('disabled', 'true')—— 它不触发表单提交拦截，也不影响form.onsubmit行为 - 必须搭配
.finally()或catch()恢复状态，否则网络失败时按钮永远卡死 - 对
<button type="submit"></button>，仅禁用按钮不够：还要监听form.onsubmit，并在回调首行执行e.preventDefault()和禁用操作
debounce 不等于防重复点击
debounce 控制的是「同一函数调用频率」，它不改变 DOM 状态，也不阻止键盘回车触发表单提交。它适合搜索框输入、滚动监听等场景，但不适合关键操作按钮。
- 典型误用：
document.getElementById('btn').addEventListener('click', debounce(submit, 1000))—— 用户快速点两下，第二个点击仍会排队等待，最终还是执行 - 真正需要的是「一次性阻断」，不是「延迟合并」；
debounce应作为辅助手段（比如防抖搜索），而非主防线 - 若硬要用，必须确保
debounce包裹的是整个业务逻辑，且内部仍要手动设disabled，否则视觉和行为不同步
视觉反馈与可访问性不能省
只设 disabled 属性，用户可能根本看不出按钮已失效，尤其在深色主题或自定义样式下。
- CSS 必须声明
button:disabled规则，至少包含：opacity: 0.6、cursor: not-allowed、background-color变灰 - 避免只用
pointer-events: none—— 它不阻止键盘操作，屏幕阅读器仍会朗读按钮，违反 WCAG - 如有加载图标，应在
disabled = true后立刻显示，而不是等请求返回才动；否则用户会反复点击
表单 submit 按钮要额外处理回车键
用户按 Enter 键触发表单提交时，完全绕过按钮的 click 事件，所以光靠按钮禁用是无效的。
- 必须监听
form.onsubmit，并在回调第一行做两件事：e.preventDefault()+submitButton.disabled = true - 不要在
onsubmit里调form.submit()—— 这会跳过所有钩子，导致验证逻辑失效 - 如果用了框架（如 Vue），推荐统一用
@submit.prevent，再手动控制按钮状态，比原生更可控
最易被忽略的其实是状态生命周期：禁用只是前端临时标记，刷新页面后按钮又变可用——如果后端已处理成功，前端没同步状态，用户可能再次提交。这类问题没法靠 disabled 或 debounce 解决，得靠服务端幂等设计或本地持久化标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
