按钮点击后需手动禁用并显示Loading文字，通过disabled属性和text/html动态控制，配合spinner增强反馈，恢复时必须在finally中执行以确保状态正确。
按钮点击后禁用并显示 Loading 文字
Bootstrap 本身不内置“加载中”状态切换逻辑，得靠手动控制 disabled 属性和文本内容。核心是：点击瞬间改文字、加禁用、可选加 spinner；加载完成再还原。别指望 btn-primary 自己变 Loading —— 它只是样式容器。
常见错误是只改文字不设 disabled，导致用户重复点击；或用了 disabled 却没恢复，按钮永远点不了。
- 用
button元素（非a），否则disabled无效 - 原始 HTML 中保留默认文字，比如
<button class="btn btn-primary">提交</button> - JS 里先缓存原始文字：
const originalText = $btn.text(); - 加载时：设置
$btn.prop('disabled', true).text('加载中...'); - 完成后：用缓存的
originalText恢复，别硬写字符串
用 Bootstrap 5 的 spinner 组件增强视觉反馈
纯文字“加载中…”不够直观，Bootstrap 5 提供了轻量 .spinner-border 和 .spinner-grow，需手动拼进按钮 HTML。注意：不能直接在按钮里写死 spinner —— 要动态插入/移除，否则 DOM 混乱。
典型错误是把 spinner 写成固定子元素，结果多次点击后 spinner 越叠越多；或没给 spinner 加 me-2 类，导致文字紧贴图标难看。
- 推荐结构：
<button><span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>加载中...</button> - JS 中用
$btn.html(...)替换整个 innerHTML，而不是.append() - 恢复时必须还原原始 HTML（含空格和换行），建议用
data-original-html存原始内容 - 加
role="status"和aria-hidden="true"避免屏幕阅读器误读
避免 Promise.then 里忘记恢复按钮状态
异步操作（如 fetch 或 axios）成功后必须显式恢复按钮，否则用户卡在 Loading 状态。很多人只处理了 .then，漏掉 .catch —— 错误发生时按钮就永远 disabled 了。
更隐蔽的问题是：用了 async/await 却在 try 外写恢复逻辑，导致异常抛出后根本走不到恢复代码。
- 必须把恢复逻辑放在
finally块里，确保无论成功失败都执行 - 示例：
btn.prop('disabled', true).html(spinnerHtml);<br>try {<br> await fetch('/api/submit');<br>} finally {<br> btn.prop('disabled', false).html(originalHtml);<br>} - 如果用
.then().catch()，两个分支都要调恢复函数，别偷懒只写一个 - 别在恢复前做耗时操作（比如弹 Toast），否则按钮解锁延迟明显
移动端点击穿透与防抖干扰
在 iOS 或某些安卓 WebView 里，快速连点可能触发两次请求，尤其当按钮恢复太快、用户没感知到已解锁时。这不是 Bootstrap 的问题，但和 Loading 状态实现强相关。
单纯加 disabled 不足以杜绝，因为 touch 事件和 click 事件冒泡时机不同，有时禁用还没生效就又进来了。
- 在绑定点击事件时，加一层简单节流：
if (btn.prop('disabled')) return;放在最开头 - 避免用
setTimeout模拟 loading（比如 1 秒后自动恢复），真实接口可能更快或更慢，造成体验割裂 - 慎用第三方防抖库包装按钮事件 —— 很可能和
disabled状态冲突，反而让按钮“点不动” - 真要兼容弱网，Loading 状态至少保持 300ms，防止闪一下就恢复，用户误以为没点上
