jQuery Deferred 对象，按顺序调用函数答案

【问题标题】：jQuery Deferred object, calling functions in sequencejQuery Deferred 对象，按顺序调用函数
【发布时间】：2012-03-11 06:07:28
【问题描述】：

我对如何使用 jQuery 的 Deferred 对象感到困惑，而且我看到的示例对我没有帮助。我想要做的是 1.）通过 ajax 调用获取日历对象，2.）用日历数据填充我的全局对象（MYOBJ）的一部分，然后 3.）用 MYOBJ 中的新数据填充页面元素.这三个函数实现了逻辑，我想依次调用：

function getCalendar(refDate, numDays) {
    return $.ajax({
        type: "POST",
        url: "services/Calendar.asmx/GetCalendar",
        data: '{ "refDate": "' + refDate + '", "numDays": "' + numDays + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).promise();
}


function loadCalendarData(response) {
    var calData = jQuery.parseJSON(response.d);
    MYOBJ.cal.dMin = calData.dMin;
    MYOBJ.cal.dMax = calData.dMax;
    MYOBJ.cal.dates = calData.dates; // array of date strings
}


function populateCalendar (x, y, z) {
    // use data from MYOBJ.cal here
}

不过，我不知道如何让 populateCalendar() 等到 loadCalendarData() 完成。这……

$.when(getCalendar(myDate, 70))
 .then(loadCalendarData)
 .then(populateCalendar(a, b, c))
 .fail(alertCalendarError);

...显然是不正确的——这只是我撞墙的一种变体，因为我不明白自己在做什么... :)

更新： 正如 GoldenNewby 和 Brian ONeil 正确指出的那样，我可以在 loadCalendarData 结束时继续调用 populateCalendar。那肯定会奏效。我希望我在发帖时就想到了这一点。我想我的最终目标是弄清楚如何实现排序。但是，在这种情况下，我想不出任何场景会调用 loadCalendarData 而不直接调用 populateCalendar，所以这个解决方案绝对有意义。谢谢。

【问题讨论】：

你不能只调用populateCalendar作为loadCalendarData的最后一行吗？
那肯定行得通，谢谢。不过，很抱歉，我忘了提到我正在努力让这些功能尽可能地相互独立。我给出的示例来自页面加载，但可以想象，之后也可以调用任一函数。主要是我想把我的头绕在 deferreds 上，这是我不知道该怎么做的一个例子。

标签： javascript jquery deferred promise

【解决方案1】：

你实际上是在执行populateCalendar(a, b, c)。您必须传递函数引用。试试这个。

$.when(getCalendar(myDate, 70))
 .then(loadCalendarData)
 .then(function(){
     populateCalendar(a, b, c)
  })
 .fail(alertCalendarError);

【讨论】：

谢谢，不过我不确定我是否理解这一点。直接传递函数和在匿名函数中执行有什么区别？
当你调用它执行的函数时，它的返回值将被用作回调，而当你传递函数引用时，它将被用作回调函数，并将在稍后执行阶段。

【解决方案2】：

似乎唯一需要以延迟方式调用的方法是 loadCalendarData。

我会从您正在进行的 .ajax 调用的成功回调中调用 loadCalendarData，然后您可以在 loadCalendarData 结束时调用 populateCalendar（如 cmets 中所述）。

它看起来像这样......

function getCalendar(refDate, numDays) {
    return $.ajax({
        type: "POST",
        url: "services/Calendar.asmx/GetCalendar",
        data: '{ "refDate": "' + refDate + '", "numDays": "' + numDays + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: loadCalendarData
    });
}


function loadCalendarData(response) {
    var calData = jQuery.parseJSON(response.d);
    MYOBJ.cal.dMin = calData.dMin;
    MYOBJ.cal.dMax = calData.dMax;
    MYOBJ.cal.dates = calData.dates; // array of date strings

    populateCalendar(a, b, c); //not called until MYOBJ is setup
}


function populateCalendar (x, y, z) {
    // use data from MYOBJ.cal here
}

【讨论】：