如何在显示警报之前更新屏幕？

Question

我正在制作一个国际象棋网站，想要显示一个警报来告诉玩家谁赢了。但是，当显示警报时，直到警报关闭后才会显示最后的移动。警报函数位于代码的最后，因此它应该在方块图像的源更改后出现。如何在显示警报之前更新屏幕？我没有或没有找到任何关于如何解决此问题的想法。

Answer 1

requestAnimationFrame()函数将回调排队以在渲染一帧之前立即运行。一旦浏览器开始处理队列，所有对其的进一步调用都会计入之后的帧。

这意味着我们可以使用它来“等待”一定数量的帧：

requestAnimationFrame(() => {
  // This callback runs immediately before frame A

  requestAnimationFrame(() => {
    // This callback runs immediately before frame B; the frame after A
    
    // ...
  });
});

我们可以为此编写一个实用函数：

function waitFrames(n, callback) {
  if (n > 0) {
    // After next frame, wait n-1 frames
    requestAnimationFrame(() => waitFrames(n - 1, callback));
  } else {
    // Wait 0 frames; run before next frame
    requestAnimationFrame(callback);
  }
}

就您而言，您需要等待 1 帧。