Mengapakah Pengendali Klik Berasaskan Gelung dalam JavaScript Kadangkala Memaparkan Nilai yang Tidak Dijangka?

Mengendalikan Peristiwa Klik dalam Gelung: Memahami Perangkap Penutupan

Apabila menugaskan pengendali klik kepada berbilang elemen dengan gelung, adalah penting untuk mengetahui mekanisme penutupan JavaScript. Kesilapan biasa ialah membuat penutupan dalam gelung tanpa menggunakan fungsi panggil balik. Ini boleh membawa kepada tingkah laku yang tidak dijangka.

Dalam coretan kod yang disediakan:

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

Tingkah laku yang dijangkakan ialah mengklik pada #mydiv3 akan memaparkan "anda mengklik 3." Walau bagaimanapun, kod itu salah menggunakan pembolehubah i, yang merupakan pembolehubah global dalam gelung. Akibatnya, pembolehubah i memegang nilai akhir 20, menyebabkan mesej makluman yang salah.

Cara yang betul untuk menetapkan pengendali klik dalam gelung ialah menggunakan fungsi panggil balik. Fungsi ini boleh mencipta skop baharu untuk pembolehubah i, memastikan setiap lelaran gelung mempunyai contoh i sendiri.

function createCallback(i){
  return function(){
    alert('you clicked ' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click(createCallback(i));
  }
});

Satu lagi penyelesaian moden, jika menggunakan ES6, ialah menggunakan kata kunci let untuk cipta pembolehubah setempat untuk setiap lelaran gelung:

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

Pendekatan ini lebih bersih dan lebih mudah difahami. Ia memastikan bahawa setiap pengendali klik mempunyai pembolehubah i sendiri, menghapuskan perangkap penutupan dan memastikan gelagat yang betul apabila mengendalikan peristiwa klik dalam gelung.

Atas ialah kandungan terperinci Mengapakah Pengendali Klik Berasaskan Gelung dalam JavaScript Kadangkala Memaparkan Nilai yang Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!