Bagaimana untuk Melaksanakan Kelewatan dalam Gelung JavaScript dengan Betul?

Menambah Kelewatan dalam Gelung JavaScript

Dalam JavaScript, adalah perkara biasa untuk menghadapi senario di mana kelewatan diperlukan dalam gelung untuk mengawal kadar pelaksanaan. Walau bagaimanapun, melaksanakan kelewatan ini boleh menjadi rumit.

Pendekatan Asal dan Masalahnya

Pada mulanya, kod di bawah telah digunakan dalam percubaan untuk memperkenalkan kelewatan 3 saat untuk setiap lelaran gelung:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Walau bagaimanapun, pendekatan ini gagal mencapai hasil yang diharapkan kerana fungsi setTimeout() ialah tidak menyekat. Akibatnya, gelung dilaksanakan dengan pantas, memulakan berbilang pencetus tamat masa 3 saat secara berturut-turut. Ini menyebabkan amaran('hello') pop timbul pertama muncul selepas 3 saat, diikuti dengan aliran tetap amaran('hello') pop timbul tanpa sebarang kelewatan.

Menyelesaikan Isu Kelewatan

Untuk menangani isu ini, adalah disyorkan untuk menggunakan pendekatan berikut:

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

Pendekatan yang disemak ini menggunakan fungsi rekursif, myLoop(), yang memulakan setTimeout() 3 saat apabila fungsi dipanggil. Dengan menambah pembilang i dalam panggilan balik setTimeout(), fungsi boleh meneruskan lelaran gelung selepas kelewatan. Ini memastikan bahawa lelaran gelung seterusnya menunggu masa yang ditentukan sebelum melaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Kelewatan dalam Gelung JavaScript dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!