Bagaimanakah saya boleh mengemas kini skrin sebelum menunjukkan amaran?

Question

Saya sedang membuat laman web catur dan ingin memaparkan makluman untuk memberitahu pemain yang menang. Walau bagaimanapun, apabila amaran dipaparkan, pergerakan terakhir tidak dipaparkan sehingga amaran dimatikan. Fungsi amaran berada di penghujung kod, jadi ia sepatutnya muncul selepas sumber imej blok berubah. Bagaimanakah saya boleh mengemas kini skrin sebelum menunjukkan amaran? Saya tidak mempunyai atau menemui apa-apa idea tentang cara untuk menyelesaikan masalah ini.

Answer 1

requestAnimationFrame()Fungsi membuat baris gilir panggilan balik untuk dijalankan serta-merta sebelum memaparkan bingkai. Sebaik sahaja penyemak imbas mula memproses baris gilir, semua panggilan lanjut kepadanya akan dikira ke arah bingkai selepas .

Ini bermakna kita boleh menggunakan ini untuk "menunggu" bilangan bingkai tertentu:

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

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

Kita boleh menulis fungsi utiliti untuk ini:

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

Dalam kes anda, anda perlu

tunggu 1 bingkai.