Javascript:监听多个异步 Google Maps API v3 请求以完成

Question

我目前正在使用 setInterval 函数来“监听”要设置的“就绪”变量，并使用多个 Google Geocoder 回调。

我想知道是否有更“合法”或更有效的方法来做到这一点，也许使用 jQuery 延迟对象或 .ajaxStop()。

我只是不知道它们是如何工作的，或者它们是否与 Google Geocoder API 和回调函数兼容。

所以目前，一旦所有地理编码完成，我将 var, geocodeReady 设置为 true，然后每 1000 毫秒设置一个间隔函数来检查 geocodeReady 尚未设置为 true。

是否有更有效/更快/简洁的方法来做到这一点？

谢谢!

var geocoder = new google.maps.Geocoder();

var addresses = [
    ['Bondi Beach Australia'],
    ['Coogee Beach Australia'],
    ['Cronulla Beach Australia'],
    ['Manly Beach Australia']
];

var n = addresses.length;
var geocodeReady = false;

for (i = 0; i < addresses.length; i++) {
    (function(address){

        geocoder.geocode( { 'address': addresses[i][0]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address.push(results[0].geometry.location.lb);
                address.push(results[0].geometry.location.mb);

            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }

            if (--n == 0) {
                geocodeReady = true;
            }                                   
        });

    })(addresses[i]);
}

var x = 0;

// set a timer to check whether our addresses have geocoded

function checkGeocode() {

    if(x === 10) {
        clearInterval(geocodeTimer);
    }

    if(geocodeReady == true) {
        clearInterval(geocodeTimer);

        for (i = 0; i < addresses.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(addresses[i][1], addresses[i][2]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(addresses[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }

    x++;
}

var geocodeTimer = setInterval(checkGeocode, 1000);

geocodeTimer;     

Answer 1

使用 YUI(雅虎用户界面)。

YUI().use("parallel", function(Y){
var stack = new Y.Parallel();
for (i = 0; i < addresses.length; i++) {
    (function(address){

        geocoder.geocode( { 'address': addresses[i][0]}, stack.add(function(results, status) {
            //every callback function will get into the stack.
            if (status == google.maps.GeocoderStatus.OK) {
                address.push(results[0].geometry.location.lb);
                address.push(results[0].geometry.location.mb);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }

        }));

    })(addresses[i]);
}

//when all callbacks are done...
stack.done(function(){
     console.log("all geocoding are finished");
});    

});

有关 YUI3 并行模块的完整文档，请访问 user guide或library API 。该文档很小且易于使用。希望这有帮助!