如何在JavaScript中实现点击按钮后加载器显示3秒自动隐藏？

你当前的代码只实现了加载器显示的逻辑，缺少定时隐藏的处理，同时按钮也没绑定触发函数，按以下方式修改即可：

1. 调整核心逻辑 #

• 给按钮绑定点击事件，触发加载器的显示与定时隐藏
• 给加载器设置初始隐藏状态，确保默认不显示

完整代码示例 #

HTML 代码 #

<button class="btn btn-danger d-inline-flex align-items-center" type="button" onclick="handleLoading()">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>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

JavaScript 代码 #

function handleLoading() {
  const loadingEl = document.getElementById('loading');
  // 显示加载器
  loadingEl.style.visibility = 'visible';
  // 延迟3秒（3000毫秒）后隐藏加载器
  setTimeout(() => {
    loadingEl.style.visibility = 'hidden';
  }, 3000);
}

关键说明 #

• onclick="handleLoading()"：给按钮绑定点击触发的处理函数
• setTimeout：用于延迟执行隐藏操作，第二个参数为延迟的毫秒数
• 初始设置style="visibility: hidden;"：让加载器默认处于不可见状态，只有点击按钮才会显示

内容的提问来源于stack exchange，提问作者ali veli