最简方案是禁用按钮并改文字，关键在阻止重复点击与状态同步：提交时设disabled和“提交中…”，成功或失败后必须在finally中恢复按钮和文字。
表单提交后按钮变灰 + 显示“提交中…”最简方案
直接禁用提交按钮并改文字，是最轻量、兼容性最好、也最容易被忽略细节的做法。关键不是加动画，而是阻止重复点击和明确反馈状态。
常见错误是只改文字不设 disabled，用户狂点仍会触发多次请求；或用了 disabled 但没在请求失败后恢复按钮，导致表单彻底不可用。
- 用
form.addEventListener('submit', handler)拦截原生提交，避免页面跳转干扰状态控制 - 在 handler 里先调
button.disabled = true和button.textContent = '提交中…' - 请求成功或失败后，必须手动恢复：
button.disabled = false、button.textContent = '提交' - 别用
type="submit"按钮的onclick，它无法可靠阻止表单默认行为
用 CSS 实现加载动画而不依赖第三方库
纯 CSS 能做到不卡主线程、零依赖，但要注意动画元素不能遮挡按钮交互区域，否则恢复按钮时可能点不到。
推荐在按钮内插入一个 承载文字，再用伪元素或额外 做旋转效果。关键是通过类名切换控制显隐，而不是直接操作 style.display。
- 给按钮加
position: relative，加载设position: absolute居中 - 用
@keyframes spin+transform: rotate(360deg)实现旋转，比 GIF 更可控 - 提交开始时加类
is-loading，同时设button.disabled = true，两者必须同步 - 动画不要用
opacity: 0隐藏文字层——要保留占位，否则按钮尺寸跳动
fetch 提交时如何正确处理 loading 状态与错误恢复
fetch 是 Promise，但它的 catch 不捕获 HTTP 错误状态（如 400、500），只捕获网络异常。这意味着你可能显示“提交成功”，实际后端返回了错误 JSON，而按钮还卡在 loading 状态。
- 必须检查
response.ok或response.status >= 200 && response.status - 把
button.disabled = false放在finally块里，确保无论成功失败都恢复按钮 - 如果用
async/await，别漏写try/catch/finally结构，尤其finally里恢复 UI - 后端返回校验失败（如邮箱已存在），应解析
response.json()后展示错误信息，而不是当成异常吞掉
移动端点击穿透与按钮响应延迟问题
在 iOS Safari 或部分安卓 WebView 中，禁用按钮后首次点击可能仍有轻微延迟，甚至出现点击穿透到下层元素——这通常是因为 CSS 的 pointer-events: none 没生效或时机不对。
- 禁用按钮时，除了
disabled，建议额外加style.pointerEvents = 'none'双保险 - 不要用
setTimeout延迟提交来“等动画”，这会让用户感知更慢；loading 状态应在事件监听器第一行就设置 - 如果表单包含
input[type="file"]，iOS 上点击文件输入框可能触发两次change，需用event.target.value变化判断是否真有新文件 - 按钮文字从“提交”→“提交中…”→“提交成功”→“提交”四阶段变化时，注意中文省略号要用
…（U+2026），别打三个英文点
实际中最容易被绕过的点是：请求失败后没恢复按钮，或者恢复了但没重置文字内容，用户以为还在加载，其实早已卡死。loading 状态必须和请求生命周期严格对齐，少一个 finally 就可能让整个表单不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
