## Comment conserver les valeurs des variables dans les écouteurs d'événements : transmission par valeur ou par référence ?

Préserver les valeurs des variables dans les écouteurs d'événements : transmission par valeur ou par référence

Lors de l'attribution de variables dans une boucle et de l'ajout d'écouteurs d'événements, il est Il est important de déterminer si vous souhaitez transmettre la valeur ou la référence de la variable à l'écouteur.

Dans votre cas, vous avez rencontré un problème où chaque écouteur utilisait la valeur finale de i au lieu de la valeur prévue au moment de création d'auditeur. Ce problème se pose car JavaScript utilise le levage de variables avec le mot-clé var, où les variables sont déclarées en haut de leur portée, leur donnant une portée globale (même si elles sont déclarées dans un bloc).

Pour résoudre ce problème, vous pouvez employez deux techniques :

Utilisation de Block-Scoping avec let ou const :

Dans les navigateurs modernes, vous pouvez utiliser les mots-clés let ou const pour créer des variables de portée bloc. Cela garantit que les variables sont déclarées dans leur bloc conteneur et ne sont pas accessibles en dehors de celui-ci.

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

Création de fermetures avec des fonctions anonymes :

Dans les navigateurs plus anciens qui le font ne prend pas en charge les variables de portée bloc, vous pouvez créer une fermeture pour conserver la valeur actuelle de i pour chaque itération. Cela implique d'envelopper la création de l'écouteur d'événement dans une fonction anonyme et de passer i comme paramètre :

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

En passant i dans la fonction anonyme comme premier argument, vous transmettez effectivement la valeur de i au heure de l'appel de la fonction à l'auditeur.

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!