必须手动控制 disabled 属性并替换文本或插入 spinner-border，bootstrap 不自动处理 loading 状态；点击瞬间需立即禁用按钮并更新文案，恢复状态须在 finally 块中执行，且原始文案须提前缓存。
必须手动控制 disabled 属性 + 替换文本（或插入 spinner-border），bootstrap 本身不自动处理 loading 状态流转，光加样式或动画根本拦不住重复点击。
点击瞬间就要禁用并改文案
用户点下按钮的那一刻，就得立刻执行两件事：设 disabled="true"、替换显示文字（比如从“提交”变成“提交中”）。这步不能等 AJAX 请求发出去之后再做——网络延迟或慢速设备下，用户早又点了第二下。
-
button.disabled = true是唯一可靠禁用方式，pointer-events: none只是辅助，不能替代 - 别只改
textContent，如果按钮里有图标（如<i class="bi bi-check"></i>），得用innerHTML或提前存好原始结构，否则还原时图标会丢 - 移动端 WebView 对
disabled样式支持不一，建议额外加style="pointer-events: none;"防穿透
用 Bootstrap 5 的 spinner-border 插入加载图标
想视觉上更明确，推荐在按钮内动态插入 <span class="spinner-border spinner-border-sm me-2"></span>，而不是纯 CSS 动画。它语义清晰、尺寸可控、不挤占文字流。
- 插入前先清空按钮内容，再 append
spinner+ 文案，避免多次点击后 DOM 节点层层嵌套 - 别直接写死 HTML 字符串拼接，容易 XSS；用
document.createElement或innerHTML = ''后再赋值更安全 -
spinner-border-sm比spinner-border更适合按钮尺寸，过大容易撑开按钮高度
恢复状态必须放在 finally 块里
无论请求成功、失败还是被取消，按钮都得恢复可点击状态。漏掉任意一种分支，按钮就永远卡在 Loading 或 disabled 状态。
- 不要只在
then里恢复，catch里也得写——否则接口报 400/500 时按钮就锁死了 - 还原时用
removeAttribute('disabled')，不是button.disabled = false（后者在部分浏览器里不触发样式重绘） - 原始文案必须提前缓存，比如
const originalText = btn.innerHTML，别靠 DOM 查询临时取，Modal 动态渲染时可能已不可靠
别碰已废弃的 data-loading-text 和 button('loading')
Bootstrap 3 时代的 data-loading-text 和 jQuery 插件方法 $(btn).button('loading') 在 v4+ 中已被移除，现在用会直接报错或静默失效。
- 查文档确认你用的是 Bootstrap 5.x —— 官方明确说明“按钮插件已删除”，所有状态控制回归原生 JS
- 如果项目还在用 jQuery，也别找第三方插件模拟旧 API，直接写三行原生逻辑更稳、体积更小、无兼容风险
- 某些老教程里
.queue()+.dequeue()的写法，在现代 Promise 场景下完全没必要，反而增加出错路径
最易被忽略的点：Modal 里动态生成的按钮，事件监听必须在元素挂载后绑定；否则 querySelector 找不到，Loading 状态压根不会触发。
