Comment puis-je mettre à jour l'écran avant d'afficher l'alerte ?

Question

Je crée un site Web d'échecs et je souhaite afficher une alerte pour informer les joueurs qui ont gagné. Cependant, lorsque l'alerte est affichée, le dernier mouvement n'est affiché que lorsque l'alerte est désactivée. La fonction d'alerte se trouve à la fin du code, elle devrait donc apparaître après le changement de la source de l'image du bloc. Comment puis-je mettre à jour l'écran avant d'afficher l'alerte ? Je n'ai pas ou trouvé d'idées sur la façon de résoudre ce problème.

Answer 1

requestAnimationFrame()Function met en file d'attente un rappel à exécuter immédiatement avant le rendu d'une image. Une fois que le navigateur commence à traiter la file d'attente, tous les autres appels seront pris en compte dans les images après .

Cela signifie que nous pouvons utiliser ceci pour "attendre" un certain nombre d'images :

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

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

Nous pouvons écrire une fonction utilitaire pour cela :

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

Dans votre cas, vous devez

attendre 1 image.