Callback jQuery pour plusieurs appels ajax

Question

Je veux faire trois appels ajax dans un événement de clic. Chaque appel ajax effectue une opération distincte et renvoie des données qui sont nécessaires pour un appel final. Les appels eux-mêmes ne sont pas dépendants les uns des autres, ils peuvent tous être lancés en même temps, mais je voudrais avoir un rappel final lorsque les trois sont terminés.

$('#button').click(function() {
    fun1();
    fun2();
    fun3();
//now do something else when the requests have done their 'success' callbacks.
});

var fun1= (function() {
    $.ajax({/*code*/});
});
var fun2 = (function() {
    $.ajax({/*code*/});
});
var fun3 = (function() {
    $.ajax({/*code*/});
});

Answer 1

Il semble que vous ayez trouvé certaines réponses à cette question, mais je pense qu'il y a quelque chose qui vaut la peine d'être mentionné ici et qui simplifiera grandement votre code. jQuery a introduit la fonction $.when dans la v1.5. Ça ressemble à ça :

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

Je ne l'ai pas vu mentionné ici, j'espère que ça aidera.

Answer 2

Voici un objet de rappel que j'ai écrit et dans lequel vous pouvez soit définir un seul rappel à lancer une fois que tout est terminé, soit laisser chaque personne avoir son propre rappel et le lancer une fois que tout est terminé :

AVIS

Depuis jQuery 1.5+, vous pouvez utiliser la méthode différée comme décrit dans une autre réponse :

  $.when($.ajax(), [...]).then(function(results){},[...]);

Exemple de report ici

pour jQuery < 1.5, ce qui suit fonctionnera ou si vous avez besoin que vos appels ajax soient déclenchés à des moments inconnus comme ici avec deux boutons : déclenché après que les deux boutons aient été cliqués

[utilisation]

pour simple callback une fois terminé : Exemple de travail

// initialize here
var requestCallback = new MyRequestsCompleted({
    numRequest: 3,
    singleCallback: function(){
        alert( "I'm the callback");
    }
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});

chacun ayant leur propre callback lorsque tout est terminé : Exemple de travail

//initialize 
var requestCallback = new MyRequestsCompleted({
    numRequest: 3
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the first callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the second callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the third callback');
        });
    }
});

[Le Code]

var MyRequestsCompleted = (function() {
    var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;

    return function(options) {
        if (!options) options = {};

        numRequestToComplete = options.numRequest || 0;
        requestsCompleted = options.requestsCompleted || 0;
        callBacks = [];
        var fireCallbacks = function() {
            alert("we're all complete");
            for (var i = 0; i < callBacks.length; i++) callBacks[i]();
        };
        if (options.singleCallback) callBacks.push(options.singleCallback);

        this.addCallbackToQueue = function(isComplete, callback) {
            if (isComplete) requestsCompleted++;
            if (callback) callBacks.push(callback);
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.requestComplete = function(isComplete) {
            if (isComplete) requestsCompleted++;
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.setCallback = function(callback) {
            callBacks.push(callBack);
        };
    };
})();

Answer 3

Je ne vois pas l'utilité d'un objet malicieux. Il suffit d'avoir une variable qui est un nombre entier. Quand vous lancez une requête, incrémentez le nombre. Quand une demande est terminée, on la décrémente. Quand il est à zéro, il n'y a pas de demande en cours, donc vous avez terminé.

$('#button').click(function() {
    var inProgress = 0;

    function handleBefore() {
        inProgress++;
    };

    function handleComplete() {
        if (!--inProgress) {
            // do what's in here when all requests have completed.
        }
    };

    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
});

Answer 4

J'aime l'idée de hvgotcodes. Ma suggestion est d'ajouter un incrémenteur générique qui compare le nombre complet au nombre nécessaire, puis exécute le callback final. Cela pourrait être intégré dans le callback final.

var sync = {
 callbacksToComplete = 3,
 callbacksCompleted = 0,
 addCallbackInstance = function(){
  this.callbacksCompleted++;
  if(callbacksCompleted == callbacksToComplete) {
   doFinalCallBack();
  }
 }
};

[Modifié pour refléter les mises à jour des noms.]

Answer 5

EDIT -- peut-être que la meilleure option serait de créer un point de terminaison de service qui fait tout ce que les trois requêtes font. De cette façon, vous n'avez qu'une seule requête à faire, et toutes les données se trouvent là où vous en avez besoin dans la réponse. Si vous trouvez que vous faites les 3 mêmes requêtes encore et encore, vous voudrez probablement suivre cette voie. Il est souvent judicieux de mettre en place un service de façade sur le serveur qui regroupe les petites actions serveur couramment utilisées. C'est juste une idée.

---

Une façon de le faire serait de créer un objet "sync" dans votre gestionnaire de clics avant les appels ajax. Quelque chose comme

var sync = {
   count: 0
}

La synchronisation sera liée à la portée des appels de succès automatiquement (fermeture). Dans le gestionnaire de succès, vous incrémentez le compte, et s'il est de 3, vous pouvez appeler l'autre fonction.

Alternativement, vous pourriez faire quelque chose comme

var sync = {
   success1Complete: false,
   ...
   success3Complete: false,
}

lorsque chaque succès est exécuté, cela changerait la valeur dans le sync à true. Vous devrez vérifier la synchronisation pour vous assurer que les trois valeurs sont vraies avant de poursuivre.

Notez le cas où l'un de vos xhrs ne renvoie pas de succès -- vous devez en tenir compte.

Une autre option encore serait de toujours appeler la fonction finale dans vos gestionnaires de succès, et de lui faire accéder à l'option de synchronisation pour déterminer s'il faut effectivement faire quelque chose. Vous devrez cependant vous assurer que la synchronisation se trouve dans la portée de cette fonction.