表单提交时禁用按钮并显示“提交中...”是最简单有效的防重复提交方式，需配合event.preventdefault()、fetch提交及finally中恢复按钮状态，同时处理网络失败、页面刷新重复提交、移动端点击延迟等问题。
表单提交时按钮变灰加 loading 文字
直接禁用按钮是最简单有效的等待提示方式，否则用户可能连点多次，后端收到重复请求。关键不是“显示动画”，而是阻止二次提交。
常见错误是只改文字不设 disabled，结果点击依然触发提交；或者用了 setTimeout 延迟恢复按钮，但没考虑网络失败场景，导致按钮永远卡在 loading 状态。
- 用
event.preventDefault()阻止默认提交，再手动调用fetch或submit() - 提交前把按钮的
textContent改成"提交中..."，同时设disabled = true - 请求成功或失败后，必须恢复按钮状态：重置
textContent和disabled - 别用 CSS 动画遮罩层替代禁用按钮——屏幕阅读器和键盘用户可能绕过它
document.querySelector('form').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = this.querySelector('button[type="submit"]');
const originalText = btn.textContent;
btn.textContent = '提交中...';
btn.disabled = true;
try {
await fetch(this.action, { method: 'POST', body: new FormData(this) });
alert('提交成功');
} catch (err) {
alert('提交失败，请重试');
} finally {
btn.textContent = originalText;
btn.disabled = false;
}
});
用 CSS 实现按钮内嵌 loading 圆圈（不依赖 JS 状态）
纯 CSS 方案适合简单表单，但必须配合 JS 控制类名切换，否则无法响应异步完成。重点在于避免用 visibility: hidden 隐藏文字——会导致按钮尺寸跳动。
容易踩的坑是 loading 图标用 position: absolute 覆盖文字，却忘了给父容器设 position: relative，图标跑出按钮范围；或者用 opacity: 0 过渡，但没加 transition，看起来像闪退。
立即学习“前端免费学习笔记（深入）”；
- 按钮内用
<span class="btn-text">提交</span>和<span class="btn-loading"></span>两个元素并存 - 默认隐藏
.btn-loading，提交时加类is-loading切换显隐和尺寸 - loading 圆圈用
border+animation: spin实现，不要用图片或 SVG 外链 - 务必为
.btn-text设transition: opacity .2s，配合opacity: 0 / 1平滑切换
防止刷新页面后重复提交（后退/重载场景）
前端 loading 只管点击瞬间，但用户按 F5 或浏览器后退再前进，可能重新触发上次的提交逻辑。这不是 UI 问题，是导航生命周期问题。
典型现象：用户提交成功后刷新页面，看到“正在提交中…”又出现一次，甚至后端真的又收了一条记录。根本原因是没清空表单或没重置历史状态。
- 成功提交后立即调用
history.replaceState()，把当前 URL 替换为无参数干净路径 - 表单提交成功后，用
this.reset()清空所有字段（注意：会丢失用户刚填的非控件内容，如contenteditable） - 服务端返回
HTTP 303 See Other跳转到结果页，比前端 JS 跳转更可靠 - 别依赖
window.onbeforeunload提示——现代浏览器基本屏蔽了它的自定义文案
移动端触摸反馈延迟明显怎么办
iOS Safari 和部分安卓 WebView 在按钮点击后有约 300ms 延迟，导致 loading 状态“卡一下才出现”。这不是代码写错了，是浏览器默认行为。
解决方案不是加 debounce，而是从根源禁用延迟。但要注意：禁用后必须确保按钮有足够点击区域（至少 44×44px），否则误触率飙升。
- 给
<form></form>或全局加touch-action: manipulation - 用
fastclick库已过时，现代方案是加viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> - 避免在按钮上监听
click之外的事件（如touchstart）来触发 loading —— 容易和滚动冲突 - 测试真机：Chrome DevTools 的模拟触摸模式不能完全复现 iOS 的点击延迟
loading 状态的本质是同步用户操作与异步网络，所有技巧都围绕“不让用户觉得系统没响应”展开。最常被忽略的是错误恢复：网络断开、接口 500、CORS 失败时，按钮必须可点、文字必须还原、错误信息得明确——否则用户只会狂点，越点越乱。
