为什么写在alert前的DOM样式修改代码没有优先执行？

问题原因 #

浏览器的JS执行线程和UI渲染线程是互斥的，同一时间只能有一个线程在运行。你调用$("#timer").css('color', 'red')时，只是修改了元素的样式属性，将重绘任务提交到了渲染队列，此时JS线程还在继续执行后续代码，还没轮到渲染线程执行重绘操作，就先运行到了alert("Time Up!")。而alert会阻塞所有线程，直到用户点击确认后才会释放资源，此时渲染线程才会执行之前提交的样式修改，所以就出现了先弹alert再变色的现象。

解决方法 #

将alert放到异步任务队列中，让JS执行完当前同步任务后，先触发UI渲染更新颜色，再执行alert。最简单的方式是用setTimeout包裹alert，设置延迟时间为0即可：

修改后的完整代码：

let time = 3;

$(function() {
  let interval = setInterval(function() {
    time--;
    
    if (time >= 0)
      document.getElementById("timer").innerHTML = time + "";
    else {
      $("#timer").css('color', 'red');
      clearInterval(interval);
      // 放入异步队列，等待渲染完成后再执行弹窗
      setTimeout(() => {
        alert("Time Up!")
      }, 0)
    }
  }, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="timer">3</h1>

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