jquery - 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());

但是，这并没有按预期工作。Ajax 调用method1将返回要使用的数据，showData()Ajax 调用method2将返回计数，该计数将分配给 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();
    });

编辑

我已经整理了一个工作演示。部分问题（至少在您发布的代码片段中）是没有名为$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)
        }
    });
};