更新元素显示延迟：如何让Spinner在处理前显示？

问题原因 #

你的代码里，添加Spinner样式后立刻执行了同步循环任务，而浏览器的UI渲染和JS代码执行共用主线程——同步任务会完全阻塞渲染进程，导致Spinner的样式更新要等所有同步代码跑完才会被浏览器处理，所以看起来Spinner是在任务结束后才显示的。

解决方案 #

方法1：用setTimeout延后执行耗时任务 #

把耗时的循环放到setTimeout里，让浏览器先完成Spinner的渲染，再执行耗时任务：

function clicked() {
  const spinner = document.getElementById("spinner");
  spinner.classList.add("fa", "fa-spinner", "fa-spin");
  
  // 把耗时任务放到下一个事件循环，给浏览器留足渲染时间
  setTimeout(() => {
    for (let i = 0; i <= 199999999; i++) {
      for (let j = 100000; j <= 1; j++) {}
    }
    document.getElementById("paragraph").innerHTML = 'Done with the processing.';
  }, 0);
}

方法2：用async/await结合Promise（更现代的写法） #

如果你的实际任务是异步操作（比如网络请求），这种写法更适配；即使是同步耗时任务，也可以包装成Promise实现异步执行：

async function clicked() {
  const spinner = document.getElementById("spinner");
  spinner.classList.add("fa", "fa-spinner", "fa-spin");
  
  // 把同步耗时任务包装成Promise，让UI先完成更新
  await new Promise(resolve => {
    for (let i = 0; i <= 199999999; i++) {
      for (let j = 100000; j <= 1; j++) {}
    }
    resolve();
  });
  
  document.getElementById("paragraph").innerHTML = 'Done with the processing.';
}

补充说明 #

如果你的实际业务是网络请求这类天然异步的操作，直接把请求代码放在添加Spinner之后即可；但如果是CPU密集型的同步任务，上面的方法能确保UI先更新，避免用户看不到加载状态。

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