Bagaimana untuk Menambah Kelewatan dengan Betul pada Gelung JavaScript Menggunakan setTimeout()?

Cara Menambah Kelewatan dalam Gelung JavaScript dengan Tamat Masa

Dalam JavaScript, menambah kelewatan dalam gelung boleh dicapai menggunakan setTimeout () fungsi. Walau bagaimanapun, adalah penting untuk memahami tingkah lakunya untuk mengelakkan keputusan yang tidak dijangka.

Pertimbangkan contoh berikut:

alert('hi');

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

Kod ini bertujuan untuk menunjukkan amaran dengan teks "hai" dan kemudian memaparkan teks "hello" selepas kelewatan 3 saat, dengan kelewatan berulang untuk lelaran berikutnya. Walau bagaimanapun, dalam praktiknya, hanya lelaran pertama berfungsi seperti yang dimaksudkan.

Sebab bagi tingkah laku ini terletak pada sifat tidak menyekat setTimeout(). Ia mencetuskan pemasa tetapi kembali serta-merta, membenarkan gelung untuk terus melaksanakan sebelum kelewatan 3 saat boleh berlaku. Ini menyebabkan amaran segera "hello" dan makluman seterusnya dipaparkan secara berterusan tanpa sebarang kelewatan.

Untuk mencapai kesan yang diingini, pendekatan alternatif boleh digunakan:

var i = 1; // set your counter to 1

function myLoop() { // create a loop function
  setTimeout(function() { // call a 3s setTimeout when the loop is called
    console.log('hello'); // your code here
    i++; // increment the counter
    if (i < 10) { // if the counter < 10, call the loop function
      myLoop(); // .. again which will trigger another 
    } // .. setTimeout()
  }, 3000);
}

myLoop(); // start the loop

Dalam ini pendekatan, pembilang dimulakan dan ditambah dalam gelung. Fungsi gelung dipanggil di dalam setTimeout(), memastikan setiap lelaran mempunyai kelewatan 3 saat sendiri sebelum melaksanakan. Dengan mengekalkan gelung dalam panggilan balik setTimeout(), selang yang dikehendaki antara makluman dicapai.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Kelewatan dengan Betul pada Gelung JavaScript Menggunakan setTimeout()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!