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并稍后在{{1}中使用}。

但是，当我触发上述代码时，showData()被调用，然后method1然后method2将showData中的数据保留为showData。我怎样才能通过'undefined'来实现这个目标，据我所知，只有当两个函数返回$.when时才会执行。我希望两个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)
        }
    });
};

jQuery.when理解

3 个答案:

修改