jQuery.when了解

我试图使用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()); 

但是，这并不像预期的那样工作。 方法1中的Ajax调用将返回要在showData()使用的数据，并且方法2中的Ajax调用将返回要分配给var计数并随后在showData()使用的计数。

但是当我触发上面的代码时， method1被调用，然后method2 ，然后showData将showData的数据保留为'undefined' 。 我怎么能通过$.when来实现这一点， $.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(); }); 

编辑

我已经制定了一个工作演示 。 部分问题（至less在你发布的代码片段中）是没有名为$callbackcallback函数。 部分问题是callback名称'$callback' 。

所以，删除jsonp: '$callback'选项，这样jQuery就默认了一个名为callback的callback函数， 并定义了一个具有该名称的函数，这一切都起作用。

Answer 3

我有一点修改你的代码，使得理解更简单…我没有testing它，请尝试一下

 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) } }); };