等待异步Javascript函数的结束来检索结果(延迟?)

时间:2013-10-01 20:52:36

标签: javascript jquery jquery-deferred deferred

好的,我知道这个话题已经多次讨论了,但我找不到解决问题的答案。

所以我想做一个简单的想法: 我正在创建一个字符串,例如:distance is : " + CalculateDistance(position); 想要的结果类似于distance is 5kms (8min)

CalculateDistance(position)是一个调用Google Maps API的函数,名为DistanceMatrix,用于计算两点之间的距离。 API已记录here,并且给定的示例完美有效。我这样改编:

function CalculateDistance(position)
{
    var service = new google.maps.DistanceMatrixService();
    var destination = new google.maps.LatLng(/* some lat/lng */);

    service.getDistanceMatrix(
    {
        origins: [position],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, callback);
}

function callback(response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK)
    {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;

        var results = response.rows[0].elements;
        distanceMatrixResult = results[0].distance.text + " ( " + results[0].duration.text + " min)";
    }

哦,顺便说一句,distanceMatrixResult是一个全局变量。实际上,我只需要得到结果[0] .distance.text的内容(当我在callback()的控制台中打印它时,值为OK)然后将值与“Distance is”连接起来。如果有人有更聪明的解决方案,欢迎它!

API调用是异步,在我的情况下,distanceMatrixResult在结果字符串中始终为空。但是当我在控制台中记录它的值时,distanceMatrixResult值变成了 AFTER 创建字符串的好处。

我想写的只有:

•呼叫CalculateDistance(异步呼叫回叫)
•结束callback时,将字符串与distanceMatrixResult值连接起来。

我尝试了一些Deferred,例如$.done()$.when().then(),但我无法成功......

有人可以帮助我吗? 谢谢!

1 个答案:

答案 0 :(得分:7)

  

distanceMatrixResult是一个全局变量

它不应该,它应该是你的承诺(延期)所代表的价值。这是基本设置:

function calculateDistance(position) {
    var service = new google.maps.DistanceMatrixService();
    var destination = new google.maps.LatLng(/* some lat/lng */);
    var dfd = $.Deferred();
    service.getDistanceMatrix({
        origins: [position],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, function(response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK)
            dfd.resolve(response);
        else
            dfd.reject(status);
    });
    return dfd.promise();
}

现在,你要做

calculateDistance(…).then(function(response) {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var results = response.rows[0].elements;
    return results[0].distance.text + " ( " + results[0].duration.text + " min)";
}).done(function(distanceMatrixResult) {
    var myString = "distance is: "+distanceMatrixResult;
    // do something with your string now
});