如何在顯示警報之前更新螢幕？

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 幀。