承诺+ geolocation.watchPosition

Question

我正试图在地理位置中使用JavaScript Promise，但是无法使它在geolocation.watchPosition中正确工作，然后子句只被调用一次：

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000, 
    timeout           : 7000
  }
}

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise) {
    var geolocation = this;
    if (promise == "getPosition")
      return new Promise(function(ok, err) {
        navigator.geolocation.getCurrentPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
    else if (promise == "watchPosition")
      return new Promise(function(ok, err) {
        geolocation.watchID = navigator.geolocation.watchPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
  },
  getPosition: function() { return this._promise('getPosition'); },
  watchPosition: function() {
    this.clearWatch();
    return this._promise('watchPosition');
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

var geolocation = new Geolocation();
geolocation.watchPosition()
  .then(
    function(position) {
      console.log("latitude: " + position.coords.latitude + " - longitude: " + position.coords.longitude)
    },
    function(error) {
      console.log("error: " + error);
    }
  )

我尝试使用从watchPosition/0返回的中间承诺，但是它返回相同的结果。

我错过了什么？

Answer 1

回答我自己。

按照@Benjamin Gruenbaum关于使用回调的建议，可以将处理两个geolocation.watchPosition响应的单个回调与承诺结合起来，然后使用then().catch()模式(在notify函数中如下)：

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000,
    timeout           : 7000
  }
};

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise, cb) {
    var geolocation = this;
    return new Promise(function(ok, err) {
      if (promise == "getPosition")
        navigator.geolocation.getCurrentPosition(cb, cb,
          geolocation.options
        );
      else if (promise == "watchPosition")
        geolocation.watchID = navigator.geolocation.watchPosition(
          cb, cb, geolocation.options
        );
    });
  },
  getPosition: function(cb) { return this._promise("getPosition", cb); },
  watchPosition: function(cb) {
    this.clearWatch();
    return this._promise("watchPosition", cb);
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

/* Testing functions from another module */
function log(Data) { console.log(Date() + " " + Data); };
function logOk({coords: {latitude: latitude, longitude: longitude}}) {
  log("latitude: " + latitude + " - longitude: " + longitude);
};
function logError({code: code, message: message}) {
  log("error geo " + code + " - " + message);
};

/* Callback from another module */
function notify(event) {
  return new Promise(
      function(ok, err) { event.coords ? ok(event) : err(event); }
    ).then(logOk).catch(logError);
};

/**/
var geolocation = new Geolocation();
// geolocation.getPosition(notify);
geolocation.watchPosition(notify);

不确定我是否正确地使用了允诺，但它有效，并允许利用链子。

Answer 2

我发现了Zach Leatherman写的这篇惊人的文章

function getCurrentPositionDeferred(options) {
  var deferred = $.Deferred();
  navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, options);
  return deferred.promise();
};

--这允许我们做以下事情：

getCurrentPositionDeferred({
  enableHighAccuracy: true
}).done(function() {
  // success
}).fail(function() {
  // failure
}).always(function() {
  // executes no matter what happens.
  // I've used this to hide loading messages.
});
// You can add an arbitrary number of
// callbacks using done, fail, or always.

要在多个延迟对象之间进行协调，请使用$.when:

$.when(getCurrentPositionDeferred(), $.ajax("/someUrl")).done(function() {
  // both the ajax call and the geolocation call have finished successfully.
});

来源：http://www.zachleat.com/web/deferred-geolocation/