ループ内で実行されるaddListener関数に変数を取得しようとしています

Question

ループ内で実行されるaddListener関数に変数を取得しようとしていますが、ループの最後のインスタンス変数。

for(var i=0; i < data.length; i++) { 
    points[i] = new google.maps.LatLng(parseFloat(data[i].lat), parseFloat(data[i].lng)); 
    gmarkers[i] = new google.maps.Marker({ 
     map: map, 
     position: points[i], 
     title: locationdata[i].title 
    }); 
    gmarkers[i].setMap(map); 
    bubbles[i] = new google.maps.InfoWindow({ 
     content: locationdata[i].summary 
    }); 
    google.maps.event.addListener(gmarkers[i], 'click', function() { 
     alert(i); 
     bubbles[i].open(map, gmarkers[i]); 
    }); 
} 

だから、問題は底部付近に警告（i）が常に理にかなってdata.lengthの最後の項目ですが、私はこれを修正する方法がわからないということです。

---

ロケットはこの質問に答えて正解でしたが、構文が少しオフだったので、実際の構文は、後に、この出くわす誰のために何であったかここに掲示：

google.maps.event.addListener(gmarkers[i], 'click', (function(i) { 
    return function() { 
     alert(i); 
     bubbles[i].open(map, gmarkers[i]); 
    }}) 
(i)); 

Answer 1

これは古典的ですJavaScriptで問題が発生しました。各リスナーに対してクロージャを作成する必要があります。

google.maps.event.addListener(gmarkers[i], 'click', (function(i) { 
    return function(){ 
     alert(i); 
     bubbles[i].open(map, gmarkers[i]); 
    }; 
})(i)); 

Answer 2

Frame.jsが解決するように設計されたさらに別の質問。ここでは、より読みやすく、スケーラブルなソリューションは、フレームを使用している。これを行うには

for(var i=0; i < data.length; i++) { 
    Frame(function(next, i){ 
     google.maps.event.addListener(gmarkers[i], 'click', function() { 
      alert(i); 
     }); 
     next(); 
    }, i); 
} 
Frame.init(); 

Answer 3

もう一つの方法は、他の機能であなたのaddListener機能を入れて、ループ内でそれを呼び出すことです。ロケットが彼の答えで言ったように、あなたがそれを理解していなければ、大きな問題になるかもしれない閉鎖の問題です。私は私がやると言っていないのですが、私は物事のカップルを試してみましたが、あなたはそうのように別々の方法を使用する場合、私はより良いそれが好き：

function addEventListener(i){ 
    google.maps.event.addListener(gmarkers[i], 'click', function() { 
     alert(i); 
     bubbles[i].open(map, gmarkers[i]); 
    }); 
} 

しかし、それは単に個人の好みの問題です。ちょうど私も他のオプションでスローしたいと思った:)