jQuery.when 理解

Question

我正在尝试使用jQuery.when 触发两个ajax 请求，然后在两个请求完成后调用某个函数。这是我的代码：

var count = 0;
var dfr;

var showData = function(data) {
    dfr.resolve();
    alert(count);
   // Do something with my data data received
};

var method1 = function() {
    dfr = $.Deferred();

    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: showData
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            count = data.d.__count;
        }
    });
};

$.when(method1(), method2())
    .then(showData());

但是，这并没有按预期工作。 method1 中的 Ajax 调用将返回要在 showData() 中使用的数据，method2 中的 Ajax 调用将返回要分配给 var count 并稍后在 showData() 中使用的计数。

但是当我触发上述代码时，method1 被调用，然后被调用 method2，然后 showData 将 showData 中的数据保留为 'undefined'。我怎样才能通过$.when 实现这一点，据我所知，只有在执行返回$.promise 的两个函数时才会执行此操作。我希望两个 ajax 调用都应该并行调用，之后的结果会根据两个调用的结果显示。

Answer 1

function showData(data1, data2) {
    alert(data1[0].max_id);
    alert(data2[0].max_id);
}

function method1() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

function method2() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

$.when(method1(), method2()).then(showData);​

这是一个有效的jsFiddle

Answer 2

问题是您将showData() 传递给then()，而不是showData。您应该将对函数的引用传递给.then()：

$.when(method1(), method2())
    .then(showData);

或

$.when(method1(), method2())
    .then(function () {
        showData();
    });

编辑

我整理了一个working demo。部分问题（至少在您发布的代码片段中）是没有名为$callback 的回调函数。部分问题在于回调名称 '$callback' 中的 $。

所以，去掉 jsonp: '$callback' ajax 选项，让 jQuery 默认使用一个名为 callback 的回调函数，并定义一个具有该名称的函数，然后一切正常。

Answer 3

我对你的代码做了一点修改，让你更容易理解……我还没有测试过，请尝试一下

var count = 0;
function countResponse(data) {
    count++;
    if(count==2)
    {
        // Do something after getting responce from both ajax request
    }
};

var method1 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};