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

Question

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

Answer 1

requestAnimationFrame()

函数 将回调排队以在 渲染一帧之前立即运行。一旦浏览器开始在队列中工作，所有对它的进一步调用都计入框架after.

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

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);
  }
}

在你的情况下，你想要等待一帧.