Comment éviter les problèmes de fermeture lors de l'accès aux variables externes dans les fonctions de boucle ?

Accès aux variables externes dans les fermetures de boucle

En JavaScript, lorsque vous accédez à des variables en dehors d'une fermeture à partir d'une boucle, vous pouvez rencontrer un problème où la dernière valeur de la variable est systématiquement renvoyée. Cela se produit parce que la variable change à chaque itération de la boucle et que la fermeture capture sa valeur finale.

Pour résoudre ce problème, des techniques de fermeture peuvent être utilisées pour étendre la variable dans la boucle. La fermeture suivante crée une fonction qui renvoie une autre fonction qui étend la variable :

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("&lt;li id=\&quot;showcasebutton_&quot; + item.id + &quot;\&quot;&gt; &lt;img src=\&quot;/images/showcase/icon-&quot; + item.id + &quot;.png\&quot; /&gt;&lt;/li&gt;");
    $("#showcasebutton_" + item.id).click(
        (function (item) {
            return function () {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item)
    );
}</code>

Dans cet exemple, une fonction anonyme est créée dans la boucle, encapsulant l'élément variable. Cette fonction est immédiatement appelée avec le paramètre item, ce qui entraîne une fermeture où l'élément est limité à chaque gestionnaire de clic.

Alternativement, jQuery fournit la fonction $.each(), qui simplifie l'itération de la boucle et élimine le besoin de fermetures dans ce scénario :

<code class="javascript">$.each(this.items, function (i, item) {
    $("#showcasenav").append("&lt;li id=\&quot;showcasebutton_&quot; + item.id + &quot;\&quot;&gt; &lt;img src=\&quot;/images/showcase/icon-&quot; + item.id + &quot;.png\&quot; /&gt;&lt;/li&gt;");
    $("#showcasebutton_" + item.id).click(function () {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

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!