Bootstrap如何让按钮在点击时显示加载动画并锁定点击

必须手动设 disabled="true" 才能彻底禁用按钮，点击瞬间执行 disabled + 文案替换；用 ::after 伪元素实现旋转图标防布局跳动；状态恢复必须在 finally 块中统一处理所有分支。

必须手动设 disabled="true"，否则按钮永远拦不住重复点击——这是唯一能同时禁用鼠标、键盘（空格/回车）、触屏和表单序列化的原生机制。

点击瞬间就要执行 disabled + 文案替换

别等 AJAX 请求发出去再操作，网络延迟下用户早点了第二下。关键动作必须在事件回调第一行完成：

1. button.disabled = true 是唯一可靠方式；btn.classList.add('disabled') 只改样式，Enter 键照样触发
2. 如果按钮含图标（如 <i class="bi bi-check"></i>），不能只改 textContent，得用 innerHTML 或提前缓存原始 HTML 字符串
3. 移动端 WebView 对 disabled 样式支持不一，建议额外加 style="pointer-events: none;" 防穿透

用 ::after 伪元素插旋转图标，避免布局跳动

直接给按钮加 animation: spin 1s infinite 会触发重排，文字偏移、宽度抖动。稳妥做法是：

1. 按钮设 position: relative
2. 用 ::after 伪元素绘制固定尺寸旋转体：content: ""、position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)
3. 显式声明 transform-origin: center，否则旧版 Safari 可能绕左上角转

状态恢复必须放在 finally 块里

无论请求成功、失败还是超时，都要还原按钮。漏掉任何一种情况，按钮就永久卡死：

1. 恢复 button.disabled = false 和 aria-disabled="false"
2. 同步清除 tabIndex="-1"（如果之前加过）
3. 还原原始文案或移除 spinner-border 元素——若用 DOM 插入方式，记得 removeChild()，别只隐藏
4. 别用 display: none 隐藏 spinner，优先用 visibility: hidden 避免布局跳动

表单内按钮要防 submit 默认行为

如果按钮在 <form> 里且没设 type，默认是 type="submit"，会导致 JS 事件执行完又触发表单提交，逻辑跑两次：

1. 要么显式写 <button type="button">提交</button>
2. 要么在事件处理函数开头加 event.preventDefault()
3. 别忘了同步设置 aria-busy="true" 和 role="button"，读屏器才不会误读

最难的不是让图标转起来，而是确保所有路径（包括异常、超时、取消）都走到 finally 里的还原逻辑——少一个分支，按钮就废一个。