Cabaran:
Menambahkan pendengar acara pada berbilang objek menggunakan gelung for dengan kerap membawa kepada semua pendengar menyasarkan objek yang sama dalam JavaScript. Ini berlaku disebabkan skop penutupan.
Penyelesaian:
Untuk menyelesaikan isu ini, gunakan Ungkapan Fungsi Yang Dikenakan Segera (IIFE) dalam gelung. Ini mewujudkan skop baharu untuk setiap lelaran, membenarkan pembolehubah dirujuk dengan betul.
Contoh:
// 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) { // IIFE to create a new scope for each iteration (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 }
Penjelasan:
Dalam kod ini, IIFE digunakan untuk mencipta skop baharu bagi setiap lelaran. Ini memastikan bahawa pembolehubah boxa dan boxb dirujuk dengan betul dan pendengar acara diperuntukkan kepada elemen kontena yang sesuai.
Pandangan Utama:
Penutupan adalah penting dalam JavaScript apabila bekerja dengan gelung yang melibatkan nilai lulus. Dengan mencipta skop baharu menggunakan IIFE, anda boleh menghalang isu berkaitan penutupan, memastikan kod anda berfungsi seperti yang dimaksudkan.
Atas ialah kandungan terperinci Bagaimanakah IIFE boleh membantu mengatasi batasan pendengar acara dalam gelung pantas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!