web-dev-qa-db-fra.com

jQuery.when comprendre

J'essaie d'utiliser le jQuery.when Pour lancer deux ajax requêtes, puis appeler une fonction une fois les deux requêtes terminées. Voici mon code:

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

Cependant, cela ne fonctionne pas comme prévu. L'appel Ajax dans method1 Renverra des données qui doivent être utilisées dans showData() et l'appel Ajax dans method2 Renverra le nombre qui doit être affecté à var count et utilisé plus tard dans showData().

Mais lorsque je déclenche le code ci-dessus, method1 Est appelé, puis method2 Puis showData laissant les données dans showData sous la forme 'undefined'. Comment puis-je y parvenir via $.when Qui, à ma connaissance, ne se déroule que lorsque les deux fonctions renvoyant $.promise Sont exécutées. Je veux que les deux appels ajax soient appelés en parallèle et que les résultats ultérieurs soient affichés en fonction des résultats des deux appels.

jqueryajaxjquery-deferred
57
Ashish
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);​

Voici un travail jsFiddle

69
Guillaume86

Le problème est que vous passez showData() à then(), pas showData. Vous devez transmettre une référence à une fonction à .then():

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

ou

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

Modifier

J'ai mis en place un démo de travail . Une partie du problème (au moins dans le fragment de code que vous avez publié) était qu'il n'y avait pas de fonction de rappel nommée $callback. Une partie du problème était le $ dans le nom de rappel '$callback'.

Supprimez donc le jsonp: '$callback' option ajax, de sorte que jQuery utilise par défaut une fonction de rappel nommée callback, et définissent une fonction avec ce nom, et tout cela travaux.

30
Matt Ball