在对象文字中使用 jquery.when答案

【问题标题】：Using jquery.when in an object literal在对象文字中使用 jquery.when
【发布时间】：2018-05-20 01:17:01
【问题描述】：

我有一个名为 addLocation 的 javascript/jQuery 函数，它是一个对象字面量的方法：

addLocation: function(latLng, address=false, elevation=false, pan=false)
{

    $.when(geographic.getAddress(latLng), geographic.getElevation(latLng), geographic.getMagneticDeclination(latLng))
        .done(function(data){

            if (data.status != 'OK') {
                window.alert(data.message);
            }

            if (pan) {
                flyityourself.map.panTo(latLng);
                flyityourself.map.setZoom(16);
            }

            flyityourself.addWaypoint(latLng, data);

            flyityourself.addMarker(latLng, data);
        })
        .fail(function(msg) {
            window.alert(msg);
        }
    );
},

三个函数 getAddress、getElevation 和 getMagneticDelination 都是名为“geographic”的第二个对象字面量的方法。

但是代码失败了。

在调试器中，我检查了所有四个函数。

getAddress、getElevation 和 getMagneticDeclination 中的每一个都创建 $.Deferred 对象并按应有的方式返回 $.Deferred.promise 对象。
getAddress、getElevation 和 getMagneticDelination 中的每一个都在检索正确的数据，并且都达到了各自的 resolve() 语句。
但在addLocation()中，data参数只包含getAddress返回的数据。

以前，只有 getAddress、getElevation 和 getMagneticDelination 这三个方法位于对象字面量“geographic”中。 addLocation 在一个扁平的 .js 文件中。在这种情况下，代码有效。

但是自从更改我的代码以将 addLocation 放入对象文字中后，代码开始失败。

$.when 在对象字面量中的工作方式是否有所不同，还是我忘记了限定某些内容？

问候。克里斯 B.

【问题讨论】：

.done(function(data1, data2, data3){...} ?!
只是想知道coords 来自哪里。这里的这一行：map.panTo(coords); 包含此变量。在您提供的代码示例中，我无法跟踪它。你能检查一下，如果它在某处声明？
嗨@gil.fernandes。 map.panTo(coords) 是一个错误。这一行和它后面的一行应该分别是flyityourself.map.panTo(latLng); 和flyityourself.map.setZoom(16);。 Map 被定义为flyityourself 的一个属性，并且是 google.maps.Map() 的一个实例。
@Pontiusthepilot 你能相应地更新帖子吗？

标签： javascript jquery object-literal .when

【解决方案1】：

A. Wolff 在他们所做的评论中是正确的 - 您在 done 回调中需要 3 个参数，一个用于 when 处理的每个承诺。

这是一个简单的示例，提供一个模拟地理对象以使您的代码在独立的小提琴中工作：

https://jsfiddle.net/tmLrn4gc/1/

// Mock geographic object for testing
geographic = {
  // Return a promise, and a second later, resolve that promise with some
  // dummy data.
  getAddress: function() {
    var dfd = $.Deferred();
    window.setTimeout(function() {
      dfd.resolve("address:lat1,lng1")
    }, 1000);
    return dfd.promise();
  },
  getElevation: function() {
    var dfd = $.Deferred();
    window.setTimeout(function() {
      dfd.resolve("elevation:meters")
    }, 1000);
    return dfd.promise();
  },
  getMagneticDeclination: function() {
    var dfd = $.Deferred();
    window.setTimeout(function() {
      dfd.resolve("declination:degrees")
    }, 1000);
    return dfd.promise();
  }
};

// A simplified location manager, showing the 3 promises and a done method.
// The console output in the fiddle shows the 3 promises are resolved as
// desired.
LocationManager = {
  addLocation: function(latLng, address=false, elevation=false, pan=false) {
    $.when(
      geographic.getAddress(latLng),
      geographic.getElevation(latLng),
      geographic.getMagneticDeclination(latLng)
    ).done(function(d1, d2, d3) {
        console.log("Done", d1, d2, d3);
    })
  }
}

// Make it all happen!
LocationManager.addLocation();

【讨论】：