jQuery Deferred对象,按顺序调用函数

时间:2012-02-20 21:51:05

标签: javascript jquery deferred promise

我对如何使用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。这肯定会奏效。我希望我在发帖时想到了这一点。我想我的最终目标是弄清楚如何实现测序。但是,在这种情况下,我无法想到在没有直接调用populateCalendar之后调用loadCalendarData的任何场景,所以这个解决方案绝对有意义。感谢。

2 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:1)

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

我会从你正在进行的.ajax调用的成功回调中调用loadCalendarData,然后你可以在loadCalendarData的末尾调用populateCalendar(正如评论中已经提到的那样)。

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

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
}