本文介绍如何通过 JavaScript 的 setTimeout 实现按钮点击后显示加载 Spinner 3 秒，随后自动隐藏，避免手动干预，确保 UI 状态准确可控。
本文介绍如何通过 javascript 的 `settimeout` 实现按钮点击后显示加载 spinner 3 秒，随后自动隐藏，避免手动干预，确保 ui 状态准确可控。
在 Web 开发中，常需通过视觉反馈（如 Bootstrap 的 spinner-border）提示用户操作正在进行。但仅设置 visibility = 'visible' 并不足够——若不主动重置其可见性，Spinner 将持续显示，破坏用户体验。
正确做法是：触发显示 → 启动定时器 → 定时隐藏。核心在于使用 setTimeout 在指定延迟后执行隐藏逻辑，而非依赖事件二次触发。
以下为完整可运行示例（已适配原 HTML 结构）：
<!-- 按钮绑定 onclick 事件 -->
<button class="btn btn-danger d-inline-flex align-items-center" type="button" onclick="startLoading()">
ATTACK
</button>
<div class="col text-white m-5 px-5">
<div id="loading" class="spinner-border text-primary load_icon" role="status" style="visibility: hidden;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<script>
function startLoading() {
// 显示 Spinner
document.getElementById('loading').style.visibility = 'visible';
// 3 秒后自动隐藏
setTimeout(() => {
document.getElementById('loading').style.visibility = 'hidden';
}, 3000);
}
</script>✅ 关键要点说明：
立即学习“Java免费学习笔记（深入）”；
- visibility: hidden 保留元素占位空间，适合需维持布局稳定的场景；若需完全移除（不占空间），可改用 display: none。
- 推荐将 style="visibility: hidden;" 预设在 HTML 中，确保初始状态可控。
- 使用箭头函数简化 setTimeout 回调，提升代码可读性。
- 避免全局函数污染，生产环境建议封装进模块或使用事件委托优化。
通过该模式，你无需额外维护状态变量或监听器，即可实现简洁、可靠、一次性的加载态控制。
