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