如何在 JavaScript 中控制点击事件后加载动画的显示与隐藏-html教程-PHP中文网

如何在 JavaScript 中控制点击事件后加载动画的显示与隐藏

本文讲解如何通过 JavaScript 的 setTimeout 函数，在按钮点击后显示 Bootstrap 加载 Spinner 3 秒，随后自动隐藏，避免手动干预，实现简洁可靠的异步视觉反馈。

本文讲解如何通过 javascript 的 `settimeout` 函数，在按钮点击后显示 bootstrap 加载 spinner 3 秒，随后自动隐藏，避免手动干预，实现简洁可靠的异步视觉反馈。

在 Web 开发中，常需为耗时操作（如表单提交、API 请求）提供即时视觉反馈。Bootstrap 提供的 .spinner-border 是理想的轻量级加载指示器，但仅控制其显示还不够——必须配套实现定时自动隐藏，否则 UI 会卡在“加载中”状态。

核心思路是：点击触发显示 → 启动计时器 → 计时结束执行隐藏。关键在于使用 setTimeout() 延迟执行隐藏逻辑，而非同步调用。

以下是完整可运行示例（已适配您原始 HTML 结构）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

<!-- 按钮绑定 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>

✅ 关键说明：

初始状态建议直接在 HTML 中设 style="visibility: hidden;"，避免页面加载时意外闪现；
使用 visibility: hidden（而非 display: none）可保留布局空间，防止页面元素跳动；
添加 if (spinner) 安全检查，避免因 DOM 元素未就绪导致脚本报错；
若需支持多次点击（如防重复提交），可在 startLoading() 开头添加禁用按钮逻辑，例如 this.disabled = true;，并在 setTimeout 回调中恢复。

? 进阶提示：若需更精细控制（如取消定时器、响应用户中断），可将 setTimeout 返回值保存为变量，配合 clearTimeout() 实现动态管理。

至此，一次点击即可完成“显示 → 等待 → 隐藏”的闭环交互，兼顾用户体验与代码健壮性。