Javascript闭包-在for循环中传递infowindow id

信息窗口使用循环放置在地图上。它们的内容是通过AJAX调用生成的。AJAX的URL由同一个循环决定。如果在呈现页面后调用AJAX函数，则循环结束，我不能再使用计数器

I

var xhr = "";
var markers = [];
var infowindow = new google.maps.InfoWindow();

//Sample array
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
                           new google.maps.LatLng(-0.829439, -91.112473),
                           new google.maps.LatLng(15.066156, -23.621399),
                          ]

var polylineNames = [one,
                     two,
                     three,
                          ]


function createHttpRequest() {
    try {   
        xhr = new XMLHttpRequest();
        return xhr;
        }
        catch (e)
        {
            //assume IE6
            try {
            xhr = new activeXBbject("microsoft.XMLHTTP");
            return xhr;
            }
            catch (e)   {
                return alert("Unable to create an XMLHttpRequest object");
            }
        }
}



  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(78.782762,17.917843),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }




    var marker, i;

    for (i = 0; i < polylineCoordinates.length; i++) {  
      marker = new google.maps.Marker({
        position: polylineCoordinates[i],
        map: map
      });
      markers.push(marker);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent("<div id=\""polylineNames[i]"\" style=\"height:50px;width:200px;\">"+polylineNames[i]+"</div>");

      infowindow.open(map, marker);

      google.maps.event.addListener(infowindow,"domready", function(){
      getStationInfo(infoWindowDiv);
            });
    }
  })(marker, i));

}//End polylineCoordinates loop (adding markers loop)


    function infoWindowDiv(doc){
       //doc can be parsed here and displayed in the infowindow
          }

   function getStationInfo(callback) {
    var xhr = createHttpRequest();
    //***This will no longer work as the loop is over. How do I get the infowindow div id?
    var url = "Station_"+polylineNames[i]+".php";
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var doc = xhr.responseXML;
                return callback(doc)
        }//end readyState

    }//end readystatechange
    xhr.open("GET",url,true);
    xhr.send(null);
}//end getStationInfo

var xhr=”“；
var标记=[]；
var infowindow=new google.maps.infowindow（）；
//样本阵列
var polylineCoordinates=[新的google.maps.LatLng（78.782762,17.917843），
新google.maps.LatLng（-0.829439，-91.112473），
新的google.maps.LatLng（15.066156，-23.621399），
]
变量polylineNames=[1，
二,，
三,，
]
函数createHttpRequest（）{
试试{
xhr=newXMLHttpRequest（）；
返回xhr；
}
捕获（e）
{
//假设IE6
试一试{
xhr=新的ActiveXbject（“microsoft.XMLHTTP”）；
返回xhr；
}
捕获（e）{
返回警报（“无法创建XMLHttpRequest对象”）；
}
}
}
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（78.782762,17.917843），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
var标记，i；
对于（i=0；i

如您所见，因为循环结束后会调用AJAX函数，

i

变量不再相关

我不能将AJAX函数放在setContent中，因为它会输出

未定义的

作为一种解决方案，我想到的是将infowindowid传递给AJAX函数

getStationInfo

，并以这种方式设置想要的url，但我不知道该怎么做。也许是以某种方式使用

这个

这里的最终目标是从服务器检索相关文件。然后我可以解析它并将其附加到infowindow

如果还有其他方法，我很想知道。非常感谢您的帮助。
您试图使用javascript闭包，但您使用的方式不对-在google事件处理程序的设置中：

for (i = 0; i < polylineCoordinates.length; i++) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            ....
        }
    })(marker, i));
    # ... do something here
}
function getStationInfo(callback) { 
    # trying to use i here
}

（i=0；i{
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
....
}
})（marker，i））；
#…在这里做点什么
}
函数getStationInfo（回调）{
#我想在这里用我
}

正确的方法是在for循环中使用闭包，这样它就可以包装整个循环，并将AJAX处理程序放在循环中：

for (i = 0; i < polylineCoordinates.length; i++)
(function(marker, i) {
    google.maps.event.addListener(marker, 'click', function() {
            ....
    });

    function getStationInfo(callback) { 
        # you can use i here even if it's an ajax callback
    }
    # you can use marker and i anywhere inside here even if it's in an ajax 
    # callback - it will be set correctly as it was during the loop run
})(marker, i));

（i=0；i
（功能（标记器，i）{
google.maps.event.addListener（标记'click'，函数（）{
....
});
函数getStationInfo（回调）{
#即使是ajax回调，也可以在这里使用i
}
#您可以在这里的任何地方使用marker和i，即使它是在ajax中
#回调-将正确设置为循环运行期间的状态
})（marker，i））；

通过这种方式，您可以在循环中的任何位置使用

标记

和

i

，即使它位于ajax中

---

回调-由于闭包，它将被正确设置为循环运行期间的状态。工作代码：

var xhr = "";
var markers = [];
var infowindow = new google.maps.InfoWindow();

//Sample array
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
                           new google.maps.LatLng(-0.829439, -91.112473),
                           new google.maps.LatLng(15.066156, -23.621399),
                          ]

var polylineNames = [one,
                     two,
                     three,
                          ]


function createHttpRequest() {
    try {   
        xhr = new XMLHttpRequest();
        return xhr;
        }
        catch (e)
        {
            //assume IE6
            try {
            xhr = new activeXBbject("microsoft.XMLHTTP");
            return xhr;
            }
            catch (e)   {
                return alert("Unable to create an XMLHttpRequest object");
            }
        }
}



  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(78.782762,17.917843),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }




    var marker, i;

    for (i = 0; i < polylineCoordinates.length; i++) {  
      marker = new google.maps.Marker({
        position: polylineCoordinates[i],
        map: map
      });
      markers.push(marker);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent("<div id=\""polylineNames[i]"\" style=\"height:50px;width:200px;\">"+polylineNames[i]+"</div>");

      infowindow.open(map, marker);

      google.maps.event.addListenerOnce(infowindow,"domready", function(){
      getStationInfo(polyNames[i]);
            });
    }
  })(marker, i));

}//End polylineCoordinates loop (adding markers loop)



   function getStationInfo(id) {
    var xhr = createHttpRequest();
    var url = "Station_"+id+".php";
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var doc = xhr.responseXML;
         /*
         ***Begin parsing here or return doc to another function
         */ 
        }//end readyState

    }//end readystatechange
    xhr.open("GET",url,true);
    xhr.send(null);
}//end getStationInfo

var xhr=”“；
var标记=[]；
var infowindow=new google.maps.infowindow（）；
//样本阵列
var polylineCoordinates=[新的google.maps.LatLng（78.782762,17.917843），
新google.maps.LatLng（-0.829439，-91.112473），
新的google.maps.LatLng（15.066156，-23.621399），
]
变量polylineNames=[1，
二,，
三,，
]
函数createHttpRequest（）{
试试{
xhr=newXMLHttpRequest（）；
返回xhr；
}
捕获（e）
{
//假设IE6
试一试{
xhr=新的ActiveXbject（“microsoft.XMLHTTP”）；
返回xhr；
}
捕获（e）{
返回警报（“无法创建XMLHttpRequest对象”）；
}
}
}
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（78.782762,17.917843），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
var标记，i；
对于（i=0；i