本文讲解如何通过 JavaScript 的 setTimeout 函数，在按钮点击后显示 Bootstrap 加载 Spinner 3 秒，随后自动隐藏，避免手动干预，实现简洁可靠的异步视觉反馈。
本文讲解如何通过 javascript 的 `settimeout` 函数，在按钮点击后显示 bootstrap 加载 spinner 3 秒，随后自动隐藏，避免手动干预，实现简洁可靠的异步视觉反馈。
在 Web 开发中，常需为耗时操作（如表单提交、API 请求）提供即时视觉反馈。Bootstrap 提供的 .spinner-border 是理想的轻量级加载指示器，但仅控制其显示还不够——必须配套实现定时自动隐藏，否则 UI 会卡在“加载中”状态。
核心思路是：点击触发显示 → 启动计时器 → 计时结束执行隐藏。关键在于使用 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>
<!-- Bootstrap CSS（CDN 链接已修正为标准格式） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script>
function startLoading() {
// 1. 显示加载动画
const spinner = document.getElementById('loading');
if (spinner) {
spinner.style.visibility = 'visible';
// 2. 3 秒后自动隐藏（使用箭头函数更简洁）
setTimeout(() => {
spinner.style.visibility = 'hidden';
}, 3000);
}
}
</script>✅ 关键说明：
立即学习“Java免费学习笔记（深入）”；
- 初始状态建议直接在 HTML 中设 style="visibility: hidden;"，避免页面加载时意外闪现；
- 使用 visibility: hidden（而非 display: none）可保留布局空间，防止页面元素跳动；
- 添加 if (spinner) 安全检查，避免因 DOM 元素未就绪导致脚本报错；
- 若需支持多次点击（如防重复提交），可在 startLoading() 开头添加禁用按钮逻辑，例如 this.disabled = true;，并在 setTimeout 回调中恢复。
? 进阶提示：若需更精细控制（如取消定时器、响应用户中断），可将 setTimeout 返回值保存为变量，配合 clearTimeout() 实现动态管理。
至此，一次点击即可完成“显示 → 等待 → 隐藏”的闭环交互，兼顾用户体验与代码健壮性。
