Comment les IIFE peuvent-ils aider à surmonter les limites des auditeurs d'événements dans les boucles rapides ?

Surmonter les limitations des EventListeners dans les boucles rapides à l'aide de fermetures

Défi :
Ajouter souvent des écouteurs d'événements à plusieurs objets en utilisant souvent une boucle for conduit tous les écouteurs à cibler le même objet en JavaScript. Cela se produit en raison de la portée de la fermeture.

Solution :
Pour résoudre ce problème, utilisez une Expression de fonction immédiatement invoquée (IIFE) dans la boucle. Cela crée une nouvelle portée pour chaque itération, permettant aux variables d'être référencées correctement.

Exemple :

// 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
}

Explication :
Dans ce code, l'IIFE est utilisé pour créer une nouvelle portée pour chaque itération. Cela garantit que les variables boxa et boxb sont correctement référencées et que les écouteurs d'événements sont affectés aux éléments de conteneur appropriés.

Key Insight :
Les fermetures sont cruciales en JavaScript lorsque vous travaillez avec des boucles. qui impliquent de transmettre des valeurs. En créant de nouvelles étendues à l'aide des IIFE, vous pouvez éviter les problèmes liés à la fermeture et garantir que votre code se comporte comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!