Compteur Javascript non transmis à la fonction google maps

Question

Je suis sûr que cela a à voir avec la portée, mais j'ai toujours l'impression de lutter contre la portée de javascript.

est ici tout cas le code ...

var beaches = [ 
     ['Surf Spot One', xxxxxx, xxxxxx, 2], 
     ['Surf Spot Two', xxxxxx, xxxxxx, 1], 
     ['Surf Spot Three', xxxxxx, xxxxxx, 3 ] 
    ]; 
    var marker = []; 
    for (var i = 0; i < beaches.length; i++) { 
     var pos = new google.maps.LatLng(beaches[i][1], beaches[i][2]); 
     marker[i] = new google.maps.Marker({ 
      setClickable: 1, 
      position: pos, 
      map: map, 
      icon: surferDude, 
      title:beaches[i][0] 
     }); 
     google.maps.event.addListener(marker[i], 'mouseover', function() { 
      // do something here on mouseover 
         console.log(i); 
      }); 
    } 

La sortie de la console est toujours sur mouseover 3? Pourquoi est-ce? J'ai besoin d'être 1 ou 2 ou 3 selon l'icône sur laquelle je souris.

Answer 1

Oui, il s'agit de la portée. Lorsque le rappel est appelé, il utilise la dernière valeur de i plutôt que la valeur i lorsque vous ajoutez l'écouteur. La fonction anonyme que vous construisez est une fermeture qui capture la variable i sans l'évaluer, i ne sera pas évaluée jusqu'à ce que le rappel est appelé et en ce moment-là, i sera 3.

La solution busting fermeture habituelle devrait fonctionner:

function create_listener(i) { 
    return function() { 
     console.log(i); 
    }; 
} 
//... 
google.maps.event.addListener(marker[i], 'mouseover', create_listener(i)); 

Vous pouvez également utiliser une fonction d'auto-exécution au lieu d'une create_listener séparée mais peut-être trop bruyant.