Bagaimanakah Saya Boleh Mengelakkan Masalah Penutupan Apabila Menggunakan For Loops dalam Pengendalian Acara JavaScript?

Kesalahan Penutupan dalam Gelung Pengendalian Acara

Dalam JavaScript, adalah penting untuk mengambil kira skop dan penutupan semasa berurusan dengan gelung. Seperti yang ditunjukkan dalam senario yang dibentangkan, menetapkan pengendali klik dalam gelung menggunakan pembolehubah i tanpa pengkapsulan penutupan yang betul menghasilkan gelagat yang tidak dijangka.

Isu asas berpunca daripada fakta bahawa pembolehubah i yang diisytiharkan dalam gelung dikongsi merentas lelaran. Akibatnya, apabila mana-mana pengendali klik dicetuskan, nilai i telah meningkat kepada nilai tertinggi, yang membawa kepada mesej makluman yang salah.

Untuk menyelesaikan isu ini, satu pendekatan adalah dengan menggunakan fungsi panggil balik. Fungsi ini merangkumi pembolehubah i sebagai sebahagian daripada penutupannya, memastikan setiap pengendali klik beroperasi secara bebas:

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

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

Sebagai alternatif, jika menggunakan ES6, kata kunci let boleh digunakan untuk mencipta pembolehubah i berskop blok dalam setiap lelaran gelung:

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

Dengan menangani masalah penutupan, pendekatan ini memastikan setiap klik pengendali memaparkan nilai i yang betul, mewakili elemen khusus yang telah diklik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelakkan Masalah Penutupan Apabila Menggunakan For Loops dalam Pengendalian Acara JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!