jQuery.when comprensión

Estoy tratando de usar el jQuery.when para disparar dos solicitudes ajax y luego llamar a alguna función una vez que las dos solicitudes se hayan completado. Aquí está mi código:

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

Sin embargo, esto no está funcionando como se esperaba. La llamada de Ajax en el method1 devolverá los datos que se utilizarán en showData() y la llamada de Ajax en el method2 devolverá el recuento que se asignará al recuento de var y luego se usará en showData() .

Pero cuando disparo el código anterior, se llama a showData y luego a showData y luego a showData dejando los datos en showData como 'undefined' . ¿Cómo puedo lograr esto a través de $.when que, por lo que sé, procede solo cuando se ejecutan las dos funciones que devuelven $.promise . Quiero que las llamadas ajax se llamen en paralelo y que los resultados posteriores se muestren en función de los resultados de ambas llamadas.

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

Aquí hay un jsFiddle de trabajo

El problema es que está pasando showData() a then() , no showData . Debe pasar una referencia a una función para .then() :

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

o

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

Editar

He creado una demostración funcional . Parte del problema (al menos en el fragmento de código que publicaste) era que no había una función de callback llamada $callback . Parte del problema era $ en el nombre de callback '$callback' .

Por lo tanto, elimine la jsonp: '$callback' ajax, de modo que jQuery jsonp: '$callback' manera predeterminada una función de callback llamada callback , y defina una función con ese nombre, y todo funciona.

He modificado un poco tu código y he sido más simple de entender … no lo he probado, por favor pruébalo

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