Comment conserver les valeurs des variables dans les écouteurs d'événements JavaScript : variables ou fermetures à portée de bloc ?

Comment conserver les valeurs des variables dans les écouteurs d'événements en JavaScript

Considérez l'extrait de code suivant :

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

Dans ce code, la valeur de i utilisée dans l'écouteur d'événements est toujours la valeur finale de results.length après la fin de la boucle. Pour résoudre ce problème, nous devons transmettre la valeur de i à l'écouteur d'événement lors de sa création.

Utilisation de variables à portée de bloc (ES6 et versions ultérieures)

Dans Dans les navigateurs modernes, nous pouvons utiliser des variables de portée bloc telles que let ou const. Ces variables ne sont accessibles que dans le bloc dans lequel elles sont définies. En utilisant une variable de portée bloc, nous pouvons garantir que la valeur de i au moment de la création de l'événement est préservée.

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

Création d'une fermeture (anciens navigateurs)

Dans les anciens navigateurs qui ne prennent pas en charge les variables de portée bloc, nous pouvons créer une fermeture pour préserver la valeur de i. Une fermeture est une fonction qui encapsule une autre fonction, créant ainsi une portée imbriquée. En passant i comme premier argument à une fonction anonyme, nous pouvons créer une fermeture qui préserve la valeur de i.

<code class="javascript">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>

En utilisant soit les variables de portée bloc, soit la technique de fermeture, nous pouvons garantir que chaque écouteur d'événement utilise la valeur de i qui était prévue.

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!