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

Javascript: Listening for multiple asynchronous Google Maps API v3 requests to finish

本文关键字：v3 API 请求 Maps Google 异步 Javascript      更新时间：2023-09-26

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

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

我只是不知道这些是如何工作的，或者它们是否与谷歌地理编码器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;

使用 YUI (Yahoo User Interface(。

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 并行模块的完整文档，请访问用户指南或库 API。文档很小，易于使用。希望这有帮助！

我认为除了

计算请求之外没有其他方法(YUI.Parallel也可以这样做(。

我猜你想在所有请求完成后执行一些东西。因此，与其从外部检查变量，不如在n==0时执行所需的函数(当您想要更加动态时，要执行的函数可以作为参数传递(

for (var i = 0,n=addresses.length; i < addresses.length; i++) {
    (function(address,callback){
        geocoder.geocode( { 'address': address[0]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address.push(results[0].geometry.location.lat());
                address.push(results[0].geometry.location.lng());
            } else {
                alert("Geocode was not successful for the following reason: " 
                       + status);
            }
            if (--n === 0) {            
                callback(addresses);
            }                                   
        });
    })(addresses[i],
       function(){console.dir(addresses);alert('geocoding finished');});
}
相关文章：