Knockout 计算函数内部的异步调用

Question

现在我有一个 Knockout 计算函数，它采用某些变量并 ajax 调用 google directionsService 来获取两个位置之间的距离。我对 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 关于延迟对象和承诺对象的文档。如果有人能帮我解决这个问题那就太好了。

Answer 1

据我所知，您的重构并没有太大的偏差。
您要找的可能是

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);
    });
}

Knockout 计算函数内部的异步调用

Asynchronous call inside a Knockout computed function

javascript

ajax

jquery

google-maps-api-3

knockout.js