JavaScript计数器达5时alert先弹出而页面未更新的问题求解

问题根因 #

• 浏览器的JavaScript执行和页面渲染共享主线程，二者执行互斥。你调用renderCounter()修改DOM的innerText属性后，浏览器只会先记录DOM变更，不会立刻触发页面重绘，需要等当前所有同步JS代码执行完毕，才会处理渲染队列中的重绘任务。
• 你代码中的alert属于同步执行代码，在修改innerText后立即触发，会直接阻塞主线程，此时页面重绘任务还没被执行，所以视觉上仍显示旧值Counts:4，但DOM属性已经被同步修改，读取innerText会得到更新后的值5。
• 该现象是JS事件循环机制导致的同步代码阻塞渲染任务的典型场景，不属于DOM属性和展示内容的不一致，只是渲染任务被延后执行了。

解决方案 #

你不需要设置1秒的延迟，只需要将alert的执行时机调整到当前页面渲染完成后即可，有两种常用实现方式：

方案1：使用0延时setTimeout #

将alert逻辑放入0延时的setTimeout中，它会被加入宏任务队列，等当前同步代码、页面渲染都执行完成后再触发，无额外等待时长：

function onClick() {
  totalCount++;
  renderCounter();

  if (totalCount > 4) {
    setTimeout(() => {
      alert("Counter value: " + totalCount);
      totalCount = 0;
      renderCounter();
    }, 0);
  }
}

方案2：使用requestAnimationFrame（渲染时机更精准） #

如果需要严格保证在页面重绘完成后立刻执行alert，可以嵌套两层requestAnimationFrame：

function onClick() {
  totalCount++;
  renderCounter();

  if (totalCount > 4) {
    requestAnimationFrame(() => {
      // 第一层回调在本次重绘前触发，第二层回调会在本次重绘完成后触发
      requestAnimationFrame(() => {
        alert("Counter value: " + totalCount);
        totalCount = 0;
        renderCounter();
      });
    });
  }
}

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