Question

我使用google maps api计算从许多不同原点到目的地点的最短路径。我决定这样做:(计算每对点，而不是将结果保存到数组，而不是检查最后哪个是最好的）。但我有回调问题 - 因为评论说数组总是为零 - 因为这个代码是在所有请求计算路由长度之前执行的。

function foo(){
var directionsService = new google.maps.DirectionsService();
var destination = new google.maps.LatLng(x,y);
var arrayOfRes= [];

for(var index in originPoints){
    var request = {
        origin:originPoints[index].marker.position,
        destination:destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                var res = {};
                res.length = result.routes[0].legs[0].distance.value;
                res.index = index;
                res.result = result;
                arrayOfRes.push(res);
            }
     });
}
  //here arrayOfRes.length is always 0
if(arrayOfRes.length>1)
{
    var bestResult = arrayOfRes[0];

    for(var i = 1; i < arrayOfRes.length; i++)
    {
        if(bestResult.length > arrayOfRes[i])
            bestResult = arrayOfRes[i];
    }

    console.log("Best is" + bestResult.length);
}
else if(arrayOfRes.length ==1)
{
    var bestResult = arrayOfRes[0];
}
 }

如何使用回调编写函数，使其等到所有请求都结束？

Answer 1

像这样的Google请求是异步的，所以你必须编写异步代码，这意味着只能处理来自回调的返回数据。

在返回路由的回调函数中，您需要检查这是否是上一个请求的答案。如果是这样，那么您的数组将包含所有结果，然后您可以处理该数组。

假设originPoints是一个数组，你可以这样做：

var arrayOfRes = [];
for (var index = 0; index < originPoints.length; ++index) {
    var request = {
        origin:originPoints[index].marker.position,
        destination:destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var res = {};
            res.length = result.routes[0].legs[0].distance.value;
            res.index = index;
            res.result = result;
            arrayOfRes.push(res);

            // check if all data has arrived
            if (arrayOfRes.length === originPoints.length) {
                // put code here to process arrayOfRes
            }
        }
    });
}

注意：javascript无法使您的代码等待所有请求完成然后继续 - 因此您必须使用异步编程样式，并且代码流将从回调继续。

注意：因为directionsService.route是一个异步调用，它将来会在某个时候调用它的回调。与此同时，你将继续执行JS。这意味着在此代码块之后的代码将在ajax调用完成之前和填充arrayOfRes之前执行。因此，您可以安全地使用arrayOfRes数据的唯一位置是回调本身或您从回调中调用的函数。

JavaScript - 回调 - 等待多个函数结束

1 个答案: