JS开发井字棋时获胜后最后一步落子图片未渲染如何解决

问题根因 #

浏览器的DOM渲染和JS同步代码执行是互斥的：你给单元格append图片之后，浏览器需要等待当前所有同步JS任务执行完成，才会将新的DOM节点渲染到屏幕上。但你的代码在append图片之后立刻同步执行了胜负判定逻辑，其中的alert会阻塞主线程，同时判定获胜后直接调用reset()清空了页面，导致图片还没来得及渲染就被清掉了，自然看不到最后一步的落子。

修复方案 #

只需要把checkWinOrDraw的调用放到setTimeout中延迟执行即可，不需要修改其他逻辑：
找到你点击事件里的这行代码：

checkWinOrDraw(xTurn)

替换为：

// 延迟到页面渲染完成后再执行胜负判定
setTimeout(() => checkWinOrDraw(xTurn), 0)

原理说明 #

哪怕设置延迟时间为0，setTimeout的回调也会被放入宏任务队列，等待当前调用栈的所有同步任务执行完毕、浏览器完成DOM重绘之后才会触发执行。此时最后一步的落子图片已经渲染到页面上，再弹出胜负提示就不会出现看不到图片的问题了。

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