Bagaimana untuk Melaksanakan Kelewatan dalam Gelung JavaScript dengan Betul?

Melaksanakan Kelewatan dalam Gelung JavaScript

Apabila bekerja dengan gelung dalam JavaScript, kadangkala perlu memperkenalkan kelewatan atau tempoh tidur untuk mengawal pelaksanaan aliran. Mari kita terokai cara untuk mencapai ini menggunakan fungsi setTimeout().

Percubaan 1: Menggunakan setTimeout()

Satu pendekatan biasa ialah menggunakan setTimeout() untuk mencipta kelewatan berasaskan masa. Walau bagaimanapun, meletakkan setTimeout() terus di dalam gelung boleh membawa kepada tingkah laku yang tidak dijangka. Sebagai contoh, kod berikut cuba melambatkan setiap lelaran sebanyak 3 saat:

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

Walaupun kod ini pada mulanya akan memaparkan mesej 'hello' selepas 3 saat, ia kemudiannya akan memaparkan mesej secara berterusan tanpa sebarang kelewatan. Ini berlaku kerana setTimeout() tidak menyekat dan kembali serta-merta, membenarkan gelung selesai sebelum tempoh kelewatan telah berlalu.

Pendekatan Alternatif: Gelung Berulang

Kepada mencapai kelewatan yang diingini, kita boleh menggunakan gelung berulang dengan panggilan setTimeout() di dalam a function:

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

Dalam kes ini, fungsi myLoop() dipanggil pada mulanya, menyediakan pencetus setTimeout() pertama. Kemudian, dalam panggilan balik setTimeout(), mesej dicetak, pembilang ditambah, dan jika pembilang masih kurang daripada 10, fungsi myLoop() dipanggil semula. Ini memastikan bahawa lelaran gelung seterusnya dicetuskan hanya selepas kelewatan 3 saat berlalu.

Dengan menggunakan gelung lelaran bersama setTimeout(), anda boleh memperkenalkan kelewatan dalam gelung JavaScript dengan berkesan dan mengawal aliran pelaksanaan dengan tepat.

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!