JS开发井字棋时alert触发早于落子图片渲染问题求助

问题原因 #

浏览器的JS执行线程和UI渲染线程是互斥的。你在把落子图片插入DOM后立刻调用alert()，alert属于同步阻塞方法，会直接卡住当前线程，浏览器还没来得及执行UI重绘把最新的落子渲染到页面上，弹窗就已经弹出来了，所以会出现你遇到的问题。

解决方案 #

最简单的实现方式是把胜负判定逻辑放到异步队列中，给浏览器留足渲染落子的时间，你可以用setTimeout包裹胜负判定和回合切换的逻辑，修改点击事件中的对应代码即可：

newElement.append(img)
// 用setTimeout延迟执行胜负判定，100毫秒的延迟用户感知不到，足够渲染线程完成落子绘制
setTimeout(() => {
  checkWinOrDraw(xTurn)
  xTurn = !xTurn
}, 100)

如果想要更精准的控制渲染时机，也可以搭配requestAnimationFrame使用，确保在浏览器完成当前帧的渲染后再执行胜负判定：

newElement.append(img)
requestAnimationFrame(() => {
  setTimeout(() => {
    checkWinOrDraw(xTurn)
    xTurn = !xTurn
  }, 0)
})

修改后落子会先渲染到页面上，再弹出胜负提示，用户体验即可恢复正常。

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