JavaScriptでループ内にリスナーをアタッチする

Question

id,latitudeおよびlongitudeを含むオブジェクト（カード）の配列があります。私は、Googleマップのマップに付加するマーカーの配列を構築しています：

for(var c = 0; c < cards.length; c++) 
{ 
    var id = cards[c]["id"]; 
    var lat = cards[c]["lat"]; 
    var lon = cards[c]["lon"]; 

    var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon)}); 
    marker.setMap(map); 
    marker.addListener('click', function(){ 
     myListenerCallback(id); 
    }); 
} 

私はクリックイベントにコールバックを添付する各マーカーに。これは、マーカーの.addListenerメソッドを使用すると簡単に行うことができます。問題は、カードのID（入力パラメータ）を含むコールバックを発生させたいということです：myListenerCallback(id)。すべてのコールバックが配列の最後のIDを使用して起動しているように見えます。対応するIDを渡すコールバックをどのようにして起動できますか？

Answer 1

これは、イベントハンドラが起動されるとループの実行が終了し、idが配列の最後の値で更新されるためです。あなたは、イベントハンドラ関数の周りにクロージャを作成し、id

for (var c = 0; c < cards.length; c++) { 
    //rest of the code 
    (function(id) { 
    marker.addListener('click', function() { 
     myListenerCallback(id); 
    }); 
    }(id)) 
} 

Answer 2

cards.forEach(function(card){ 
    var id = card["id"]; 
    var lat = card["lat"]; 
    var lon = card["lon"]; 

var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon)}); 
marker.setMap(map); 
marker.addListener('click', function(){ 
    myListenerCallback(id); 
}); 
}); 

を渡すことができ

は...