Bagaimana untuk Mengelakkan Isu Penutupan Apabila Menggunakan Pendengar Acara dalam Gelung?

Mengelakkan Isu Penutupan Apabila Menggunakan Pendengar Acara dalam Gelung

Dalam percubaan anda untuk melampirkan pendengar acara pada berbilang elemen menggunakan gelung for, anda telah menghadapi isu di mana semua pendengar akhirnya menyasarkan objek terakhir. Ini disebabkan oleh cara penutupan berfungsi dalam JavaScript.

Memahami Penutupan

Apabila fungsi merujuk kepada pembolehubah yang diisytiharkan di luar skopnya, ia mengekalkan akses kepada pembolehubah itu walaupun selepas fungsi keluar. Dalam kes anda, fungsi pendengar acara ditakrifkan dalam kotak rujukan gelung dan boxb, yang ditakrifkan di luar gelung. Apabila gelung selesai, pembolehubah ini menghala ke elemen terakhir dalam gelung.

Membetulkan Isu

Untuk mengelakkan isu penutupan ini, anda boleh menggunakan fungsi yang digunakan serta-merta ungkapan (IIFE) di dalam gelung. IIFE mencipta skop baharu, jadi pembolehubah yang diisytiharkan di dalamnya tidak boleh diakses di luar fungsi.

Kod Disemak

Berikut ialah kod yang disemak dengan IIFE sedia ada:

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;
    elem[i].addEventListener("click", function() {
      makeItHappen(boxa, boxb);
    }, false);
    elem[k].addEventListener("click", function() {
      makeItHappen(boxb, boxa);
    }, false);
  }()); // immediate invocation
}

Dengan menggunakan IIFE, anda memastikan bahawa setiap fungsi pendengar acara mempunyai skopnya sendiri, menghalang isu penutupan. Kini, setiap pendengar acara akan menyasarkan elemen yang sepadan dengan betul dalam gelung.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Isu Penutupan Apabila Menggunakan Pendengar Acara dalam Gelung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!