开发国际象棋网站：如何让屏幕在弹出alert前完成更新？

问题核心是alert是同步阻塞函数，会立刻暂停JavaScript线程执行，导致浏览器还没来得及完成DOM更新后的重绘，就弹出了提示框。即便alert写在DOM更新代码之后，浏览器也会因为线程被阻塞，推迟重绘操作到alert关闭后。

下面是两种简单有效的解决方法：

方法一：使用setTimeout延迟alert执行 #

把alert代码包裹在setTimeout中，设置延迟为0毫秒。这会让alert的执行被放到下一个事件循环周期，给浏览器足够时间完成当前DOM更新和屏幕重绘。

示例代码：

// 先更新棋盘格子的图片源
document.querySelector('.chess-square').src = 'last-move-piece.png';

// 用setTimeout把alert放到下一个事件循环
setTimeout(() => {
  alert('黑方获胜！');
}, 0);

方法二：结合requestAnimationFrame（更稳妥） #

如果遇到极端情况setTimeout(0)仍不生效，可以用requestAnimationFrame确保浏览器完成重绘后再触发alert：

// 更新棋盘图片
document.querySelector('.chess-square').src = 'last-move-piece.png';

// requestAnimationFrame会在浏览器下一次重绘前触发回调
requestAnimationFrame(() => {
  // 再用setTimeout把alert推到重绘完成后的事件循环
  setTimeout(() => {
    alert('白方获胜！');
  }, 0);
});

原理说明 #

JavaScript是单线程模型，同步代码执行时，浏览器会先完成所有DOM修改，但不会立刻进行屏幕重绘。setTimeout(0)会将alert的执行任务加入任务队列，等当前同步代码执行完毕、浏览器完成重绘后，再执行队列中的alert。

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