Bagaimanakah Saya Boleh Mengelak Isu Penutupan Apabila Menetapkan Pengendali Klik dalam Gelung JavaScript?

Mengatasi Isu Penutupan dalam Tugasan Pengendali Klik dalam Gelung

Apabila menugaskan pengendali klik kepada berbilang elemen dalam satu gelung, perangkap biasa timbul akibat penutupan dalam JavaScript. Kod yang disediakan mempamerkan isu ini:

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

Kod ini bertujuan untuk memaparkan indeks elemen yang diklik apabila klik berlaku. Walau bagaimanapun, ia secara salah menunjukkan 'anda mengklik 20' untuk setiap klik, bukannya memaparkan indeks sebenar. Tingkah laku ini berpunca daripada penutupan yang dibuat dalam gelung.

Penyelesaian: Menggunakan Fungsi Panggilan Balik

Untuk menyelesaikan isu ini, kami boleh menggunakan fungsi panggil balik seperti yang ditunjukkan di bawah:

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

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

Dalam versi yang dikemas kini ini, fungsi panggil balik dibuat dalam gelung. Fungsi ini menangkap nilai semasa 'i', memastikan indeks yang betul dipaparkan apabila elemen diklik.

Memanfaatkan Kata Kunci biarkan ES6

Jika sintaks ES6 tersedia, kita boleh menggunakan biarkan kata kunci mencapai hasil yang sama dengan lebih ringkas:

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

Kata kunci let memastikan bahawa 'i' diliputi secara setempat dalam gelung, mengelakkan isu penutupan dan memaparkan indeks klik yang betul pada setiap pengaktifan elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelak Isu Penutupan Apabila Menetapkan Pengendali Klik dalam Gelung JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!