Mengapa Pengendali Klik dalam Gelung Mempamerkan Gelagat Tidak Dijangka?

Pengurusan Penutupan yang Betul untuk Pengendali Klik dalam Gelung

Isu:

Menetapkan pengendali klik kepada berbilang elemen dalam satu gelung boleh membawa kepada tingkah laku yang tidak dijangka. Secara khusus, mengklik pada elemen tertentu boleh mencetuskan tindakan yang tidak berkaitan dengan elemen tersebut. Apakah punca isu ini?

Penjelasan:

Masalah timbul apabila menggunakan penutupan dalam gelung. Apabila penutupan dibuat dalam gelung, ia mengekalkan rujukan kepada pembolehubah gelung. Dalam kes ini, pembolehubah itu ialah i. Walau bagaimanapun, apabila gelung berlangsung, i dikemas kini dengan setiap lelaran. Akibatnya, apabila pengendali klik dilaksanakan, ia menggunakan nilai akhir i (20 dalam kes ini), tanpa mengira elemen yang benar-benar diklik.

Penyelesaian:

Untuk menangani isu ini, fungsi panggil balik boleh digunakan untuk membuat penutupan baharu bagi setiap pengendali klik. Ini memastikan bahawa setiap pengendali mempunyai rujukan uniknya sendiri kepada pembolehubah gelung.

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

Dalam gelung, fungsi panggil balik ini boleh diberikan kepada setiap pengendali klik, mengekalkan nilai i yang betul bagi setiap elemen.

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

Alternatif Moden dalam ES6:

ES6 memperkenalkan kata kunci let, yang membenarkan pembolehubah berskop blok. Ini bermakna pembolehubah i dalam gelung akan menjadi setempat kepada gelung itu, menghapuskan keperluan untuk fungsi panggil balik.

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

Pendekatan ini lebih ringkas dan mudah dibaca, menjadikannya pilihan pilihan untuk moden Pembangunan JavaScript.

Atas ialah kandungan terperinci Mengapa Pengendali Klik dalam Gelung Mempamerkan Gelagat Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!