Wie kann ich den Bildschirm aktualisieren, bevor die Warnung angezeigt wird?

Question

Ich erstelle eine Schach-Website und möchte eine Benachrichtigung anzeigen, um den Spielern mitzuteilen, wer gewonnen hat. Wenn die Warnung jedoch angezeigt wird, wird die letzte Bewegung erst angezeigt, wenn die Warnung ausgeschaltet wird. Die Warnfunktion befindet sich am Ende des Codes und sollte daher angezeigt werden, nachdem sich die Quelle des Blockbilds geändert hat. Wie kann ich den Bildschirm aktualisieren, bevor die Warnung angezeigt wird? Ich habe oder habe keine Ideen gefunden, wie ich dieses Problem lösen könnte.

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