Estoy tratando de usar jQuery.when para disparar dos solicitudes ajax y luego llamar a alguna función después de que se hayan completado las dos solicitudes. 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 Ajax en el método 1 devolverá los datos que se usarán en method1 showData() y la llamada Ajax en el method2 2 devolverá el recuento que se asignará a var count y luego se usará en showData() .
Pero cuando disparo el código anterior, se llama al method2 1 y luego showData method1 dejando los datos en showData como 'undefined' . ¿Cómo puedo lograr esto a través $.when que, hasta donde yo sé, procede solo cuando se ejecutan ambas funciones que devuelven $.promise ? Quiero que ambas 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 que funciona
El problema es que estás pasando showData() a then() , no showData . Debe pasar una referencia a una función a .then() :
$.when(method1(), method2()) .then(showData);o
$.when(method1(), method2()) .then(function () { showData(); }); He reunido una demostración de trabajo . Parte del problema (al menos en el fragmento de código que publicaste) era que no había una función de devolución de llamada llamada $callback . Parte del problema era el $ en el nombre de devolución de llamada '$callback' .
Por lo tanto, elimine la jsonp: '$callback' ajax, de modo que jQuery tenga por defecto una función de devolución de llamada llamada callback de llamada, y defina una función con ese nombre, y todo funcionará.
Modifiqué un poco su código y lo hice más fácil de entender... no lo he probado, por favor pruébelo.
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) } }); };