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

Perangkap Biasa: Penutupan dalam Gelung

Apabila bekerja dengan gelung untuk menetapkan pengendali klik kepada berbilang elemen, mudah untuk jatuh ke dalam perangkap membuat penutupan secara tidak sengaja. Ini boleh membawa kepada tingkah laku yang tidak dijangka seperti yang ditunjukkan dalam kod JavaScript yang disediakan.

Dalam contoh yang diberikan, isunya terletak pada fungsi pengendali klik untuk setiap elemen. Dengan melampirkannya dalam gelung, kami membuat penutupan yang merujuk pembolehubah i daripada gelung. Walau bagaimanapun, memandangkan i berubah dengan setiap lelaran, apabila peristiwa klik berlaku, ia sentiasa mengakses nilai akhir i (dalam kes ini, 20) dan bukannya nilai yang dimaksudkan untuk elemen tertentu.

Penyelesaian :

Untuk mengelakkan isu penutupan ini, anda perlu mencipta fungsi panggil balik yang merangkum nilai yang dikehendaki. Menggunakan Ungkapan Fungsi Yang Dipanggil Segera (IIFE), kita boleh mencapai ini:

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

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

Dengan pendekatan ini, fungsi panggil balik menangkap nilai semasa i untuk setiap lelaran gelung, memastikan nilai yang betul dihantar ke pengendali klik.

Penyelesaian Moden dengan ES6:

Dalam ES6, kata kunci let boleh digunakan untuk mencipta pembolehubah setempat untuk setiap lelaran gelung. Ini menghapuskan keperluan untuk penyelesaian dengan fungsi panggil balik:

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

Penyelesaian ini lebih ringkas dan mengelakkan potensi isu penutupan semasa mengendalikan acara klik dalam gelung.

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