Knockout计算函数内的异步调用

时间:2015-01-03 18:30:46

标签: javascript jquery ajax google-maps-api-3 knockout.js

现在我有一个Knockout计算函数,它接受某些变量并对google directionsService进行ajax调用以获得两个位置之间的距离。我对ajax请求的回调函数进行了一些计算。我想要做的是仅在位置变量发生变化时才进行ajax调用,这样每次ko可观察的变化时都不会进行api调用。

这是我的初始代码:

ko.computed(function () {

    if (checkStatus() !== "invalid-data") {
      // Encode address for google API
      var start = self.start().split(' ').join('+');
      var end = self.end().split(' ').join('+');

        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
        };

        directionsServices.route(request, function (response, status) {

          if (status === "OK") {
            // calculations
          } else {
            console.error("Error: " + status);
          }
        });
      }
    }

  }, self);

这是我尝试重构API调用:

function getTripData() {

    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };

    return $.Deferred(function(dfd) {
      directionsServices.route(request, dfd.resolve());
    }).promise();
}

if (locationsChanged) {
  trip = getTripData();
  trip.done (function() {
    console.log(trip.status);
    console.log(trip.response);
  });
}

我知道这不对,代码也不起作用。我无法理解延迟和承诺对象上的JQuery文档。如果有人可以帮我解决这个问题,那就太好了。

1 个答案:

答案 0 :(得分:0)

据我所知,你的重构并没有太多关闭 您正在寻找的可能是

function getTripData() {
    var request = {
        origin: start,
        destination: start,
        waypoints: [{
            location: end
        }],
        travelMode: google.maps.TravelMode.DRIVING
    };
    var dfd = $.Deferred();
    directionsServices.route(request, function(response, status) {
        dfd.resolve(response, status);
    });
    return dfd.promise();
}

if (locationsChanged) {
    trip = getTripData();
    trip.done(function(response, status) {
        console.log(response);
        console.log(status);
    });
}