Comment conserver les valeurs des variables lors de la transmission d'arguments aux fonctions à l'intérieur de boucles ?

Préserver les valeurs des variables lors de la transmission d'arguments aux fonctions

Lorsque vous travaillez avec des boucles JavaScript, vous pouvez rencontrer des situations dans lesquelles vous devez conserver la valeur de une variable en la passant à une fonction. Ce scénario se produit lorsque la valeur de la variable peut changer pendant l'exécution de la boucle, entraînant un comportement inattendu des écouteurs d'événements.

Considérez l'exemple suivant :

<code class="js">for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
        change_selection(i);
    });
}

Dans ce code, l'écouteur d'événements est attaché à chaque marqueur dans la boucle. Cependant, lorsque l'écouteur est déclenché, il utilise la valeur finale de i, qui correspond à la longueur du tableau de résultats à la fin de la boucle. Ce comportement n'est pas souhaitable car il entraîne l'utilisation de la même valeur pour tous les écouteurs d'événements.

Pour préserver la valeur de i pour chaque écouteur, vous pouvez utiliser des variables de portée bloc (dans les navigateurs modernes) ou des fermetures (dans navigateurs plus anciens).

Navigateurs modernes (ES6) :

<code class="js">for (let i = 0; i < results.length; i++) {
    let marker = results[i];
    google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

L'utilisation du mot-clé let crée une variable de portée bloc qui n'est accessible que dans la boucle. Cela garantit que chaque écouteur d'événement dispose de sa propre copie de la valeur i au moment de la création.

Anciens navigateurs :

<code class="js">for (var i = 0; i < results.length; i++) {
    (function (i) {
        marker = results[i];
        google.maps.event.addListener(marker, 'click', function() {
            change_selection(i);
        });
    })(i);
}</code>

Création d'une fonction anonyme et appel avec i comme premier argument crée une fermeture. La fonction préserve la valeur de i au moment de sa création, garantissant que chaque écouteur d'événement utilise la valeur correcte pour son marqueur spécifique.

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!