如何在函数执行期间显示/隐藏Bootstrap Spinner加载组件？

问题根源分析 #

1. display: initial 不符合Bootstrap Spinner的默认布局：Bootstrap的.spinner-border默认display值是inline-block，而initial会将div元素重置为默认的block，导致样式异常甚至看起来没显示。
2. 自定义CSS与Bootstrap内置样式冲突：直接给.spinner-border加display: none，容易和Bootstrap的工具类优先级混淆，不如用官方提供的类更可靠。
3. 同步操作阻塞渲染：如果函数内是同步耗时任务，浏览器会先执行完代码再渲染DOM，导致Spinner根本没机会显示。

可行解决方案 #

方案1：用Bootstrap内置工具类控制显隐（推荐）

Bootstrap自带d-none类用于隐藏元素，用类切换的方式最符合框架规范，也避免样式冲突：

1. 修改HTML，添加d-none类初始隐藏：

<div id="resultsSpinner" class="spinner-border d-none" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

2. JS中通过类列表切换显隐：

function doesSomething() {
  const spinner = document.getElementById('resultsSpinner');
  
  // 显示Spinner
  spinner.classList.remove('d-none');

  // 模拟耗时操作（实际替换成你的业务代码，比如接口请求、大量计算）
  setTimeout(() => {
    // 执行完毕，隐藏Spinner
    spinner.classList.add('d-none');
  }, 2000);
}

方案2：修正自定义CSS的显隐逻辑

如果你坚持用自定义CSS控制，需要设置正确的display值：

1. 保留原CSS：

.spinner-border {
  width: 3rem;
  height: 3rem;
  display: none;
}

2. 修改JS，将initial替换为Bootstrap默认的inline-block：

function doesSomething() {
  const spinner = document.querySelector('.spinner-border');
  
  // 显示Spinner
  spinner.style.display = 'inline-block';

  // 模拟耗时操作
  setTimeout(() => {
    // 隐藏Spinner
    spinner.style.display = 'none';
  }, 2000);
}

方案3：处理同步耗时操作的渲染阻塞

如果函数内是同步的大量计算，浏览器会阻塞渲染，导致Spinner不显示。这时候需要把耗时任务放到异步队列，让浏览器先渲染Spinner：

function doesSomething() {
  const spinner = document.getElementById('resultsSpinner');
  spinner.classList.remove('d-none');

  // 用setTimeout把耗时操作丢到异步任务，给浏览器渲染时间
  setTimeout(() => {
    // 这里放你的同步耗时代码
    for (let i = 0; i < 1000000000; i++) {}

    // 完成后隐藏
    spinner.classList.add('d-none');
  }, 0);
}

方案4：修复jQuery的fadeIn用法

如果想用jQuery，需要修正fadeIn后的display值，因为默认fadeIn会设置为block，和Spinner的inline-block冲突：

function showLoader() {
  $(".spinner-border").fadeIn().css('display', 'inline-block');
}

function doesSomething() {
  showLoader();
  
  setTimeout(() => {
    $(".spinner-border").fadeOut();
  }, 2000);
}

内容的提问来源于stack exchange，提问作者e-driver1