Mengapakah `setTimeout` dalam Gelung `for` Mencetak Nilai Tidak Dijangka, dan Bagaimana Ini Boleh Dibetulkan?

Mencetak Nilai Berturut-turut dalam untuk-Gelung Menggunakan setTimeout

Isu:

Dalam perkara berikut skrip, fungsi setTimeout digunakan dalam gelung for untuk memaklumkan nilai secara berurutan. Walau bagaimanapun, output yang terhasil menunjukkan bahawa nilai '3' dicetak dua kali berbanding '1' dan '2' seperti yang dijangkakan.

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

Sebab:

Masalah timbul kerana nilai i dalam gelung for diubah suai dari semasa ke semasa, tetapi fungsi setTimeout hanya menangkap rujukan kepada asal pembolehubah.

Penyelesaian:

Untuk menangani isu ini, pembolehubah i harus ditangkap sebagai nilai unik untuk setiap fungsi tamat masa. Ini boleh dicapai dengan mencipta fungsi baharu yang mengambil i sebagai hujah dan kemudian memanggil setTimeout dengan hujah ini:

function doSetTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

Dengan pendekatan ini, setiap lelaran gelung mencipta salinan tersendiri bagi pembolehubah i, memastikan bahawa nilai yang dimaklumkan dicetak secara berturut-turut seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapakah `setTimeout` dalam Gelung `for` Mencetak Nilai Tidak Dijangka, dan Bagaimana Ini Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!