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

JavaScript - callback - waiting for multiple functions to end

本文关键字：函数 结束 等待 回调 JavaScript      更新时间：2023-09-26

我用谷歌地图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];
}
 }

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

像

这样的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数据的地方是在回调本身或从回调调用的函数中。

相关文章：