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

Question

The infowindows are placed on the map using a loop. Their content is generated with an AJAX call. The AJAX's URL is determined by that same loop. If I call the AJAX function once the page has been rendered, then the loop is over and I can no longer use the counter 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

As you can see, because the AJAX function is called once the loop is over, the i variable is no longer relevant.

I can't just put the AJAX function inside the setContent because that outputs undefined .

What I had in mind as a solution was passing the infowindow id to the AJAX function getStationInfo and setting the wanted url that way, but I couldn't wrap my head around how to do that. Perhaps using this somehow?

The ultimate goal here is to retrieve the relevant file from the server. Then I can parse and append it to the infowindow.

And if there's another method of how to go about this, I'd sure like to know about it. Any help greatly appreciated.

Answer 1

You are trying to use javascript closures but you do it the wrong way - in the setting of the google event handler:

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
}

The correct way is to use the closure right inside the for loop, so that it wraps the whole loop, and place the AJAX handler inside the loop:

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));

This way you can use marker and i anywhere inside the loop even if it's in an ajax callback - thanks to closures it will be set correctly as it was during the loop run .

Answer 2

Working Code:

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

What changed?

1. id variable polyNames[i] is sent to the AJAX function getStationInfo from within the loop.
2. infoWindowDiv function made redundant.
3. AddListerner changed to AddListenerOnce to avoid duplication.