Rumah > hujung hadapan web > tutorial js > Bagaimanakah IIFE boleh membantu mengatasi batasan pendengar acara dalam gelung pantas?

Bagaimanakah IIFE boleh membantu mengatasi batasan pendengar acara dalam gelung pantas?

Patricia Arquette
Lepaskan: 2024-11-09 07:02:02
asal
391 orang telah melayarinya

How can IIFEs help overcome the limitations of event listeners in fast loops?

Mengatasi Pengehadan EventListeners dalam Gelung Pantas Menggunakan Penutupan

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
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan