example - jQuery.when comprensión

jquery ajax post

Question

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.

Answer 1

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 devolución de llamada llamada $callback . Parte del problema era $ en el nombre de devolución de llamada ''$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.

Answer 2

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

Answer 3

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 trabajo