按钮点击后应立即禁用并显示加载文字，请求结束后恢复原状；需统一处理成功、失败及中断场景，移动端还需添加 pointer-events: none 防止点击穿透。
按钮点击后禁用并显示加载文字
bootstrap
本身不内置“加载中”状态逻辑，得靠手动控制
属性和文本内容。核心是：点击瞬间改文字、加禁用、必要时加 spinner；请求结束再还原。否则用户会重复提交，或者界面状态和实际行为脱节。
常见错误是只改了文字没禁用按钮，或禁用了但没恢复——尤其在请求失败后忘记重置。
用
元素（非
），才能可靠响应
推荐在 JS 中统一操作：
如果用 Bootstrap 5+ 的
，建议包裹在
内，避免文字跳动
Bootstrap 5 中插入 spinner 的正确写法
直接写
没问题，但必须配合文本容器做显隐切换，否则 spinner 和文字会堆叠或错位。
典型翻车场景：把 spinner 和文字都设为 inline-block 后没控制宽度，导致按钮撑大；或者用
替换整个内容却漏掉 data-* 属性。
初始 HTML 推荐结构：
JS 中替换内容：
恢复时别用
，用
更安全
请求失败后按钮状态容易被遗忘
90% 的加载按钮 bug 出现在错误处理分支：网络超时、400/500 响应后，按钮仍保持 disabled + spinner 状态，用户无法重试。
这不是 UI 问题，是控制流遗漏。尤其用
时，
必须覆盖所有可能中断路径（包括解析失败、timeout、abort）。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
无论成功或失败，都要调用统一的
函数
避免在
里 reset，在
里又写一遍——提取成 finally 块更稳
如果用了
，abort 也要触发 reset，否则用户点了取消，按钮卡死
移动端点击穿透和 loading 反馈延迟
在 iOS Safari 或部分安卓 WebView 里，按钮禁用后仍可能响应第二次点击（尤其是快速连点），本质是事件冒泡未阻断或 CSS
干扰。
另一个隐形问题是：JS 执行快，但 spinner 渲染有帧延迟，用户点下去瞬间没视觉反馈，会下意识再点。
禁用按钮后立刻加
，双重保险
不要等请求发出去才改状态；点击事件回调第一行就更新按钮
如果用 Bootstrap 的
类（如
），注意它只是视觉灰化，不阻止点击——必须配
属性
事情说清了就结束。最常漏的是错误路径的按钮还原，以及移动端的 pointer-events 补漏。
disabledbuttonadisabledbtn.textContent = '加载中...'; btn.disabled = true;spinner-borderspaninnerHTMLbtn.innerHTML = '加载中...';innerTextquerySelector('.btn-text').textContent = '提交'fetchcatchresetButton(btn)thencatchAbortControllerpointer-eventsstyle.pointerEvents = 'none'disabledbtn-disableddisabled