Le séquençage des requêtes ajax

jQuery 1.5+

J'ai développé une $.ajaxQueue() plugin qui utilise le $.Différés, .file(), et $.ajax() aussi de passer de nouveau un promesse qui est résolu lorsque la requête est terminée.

/*
* jQuery.ajaxQueue - A queue for ajax requests
* 
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/ 
(function($) {

//jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});

$.ajaxQueue = function( ajaxOpts ) {
    var jqXHR,
        dfd = $.Deferred(),
        promise = dfd.promise();

    //queue our ajax request
    ajaxQueue.queue( doRequest );

    //add the abort method
    promise.abort = function( statusText ) {

        //proxy abort to the jqXHR if it is active
        if ( jqXHR ) {
            return jqXHR.abort( statusText );
        }

        //if there wasn't already a jqXHR we need to remove from queue
        var queue = ajaxQueue.queue(),
            index = $.inArray( doRequest, queue );

        if ( index > -1 ) {
            queue.splice( index, 1 );
        }

        //and then reject the deferred
        dfd.rejectWith( ajaxOpts.context || ajaxOpts,
            [ promise, statusText, "" ] );

        return promise;
    };

    //run the actual query
    function doRequest( next ) {
        jqXHR = $.ajax( ajaxOpts )
            .done( dfd.resolve )
            .fail( dfd.reject )
            .then( next, next );
    }

    return promise;
};

})(jQuery);

jQuery 1.4

Si vous êtes à l'aide de jQuery 1.4, vous pouvez profiter de l'animation de la file d'attente sur un objet vide pour créer votre propre "file d'attente" pour vos requêtes ajax pour les éléments.

Vous pouvez même facteur dans votre propre $.ajax() de remplacement. Ce plugin $.ajaxQueue() utilise la norme de " fx " de la file d'attente pour jQuery, qui démarre automatiquement le premier élément ajouté si la file d'attente n'est pas déjà en cours d'exécution.

(function($) {
  //jQuery on an empty object, we are going to use this as our Queue
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    //hold the original complete function
    var oldComplete = ajaxOpts.complete;

    //queue our ajax request
    ajaxQueue.queue(function(next) {

      //create a complete callback to fire the next event in the queue
      ajaxOpts.complete = function() {
        //fire the original complete if it was there
        if (oldComplete) oldComplete.apply(this, arguments);

        next(); //run the next query in the queue
      };

      //run the query
      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Exemple D'Utilisation

Donc, nous avons un <ul id="items"> qui a quelques <li> que nous voulons copier (à l'aide d'ajax!) à la <ul id="output">

//get each item we want to copy
$("#items li").each(function(idx) {

    //queue up an ajax request
    $.ajaxQueue({
        url: '/echo/html/',
        data: {html : "["+idx+"] "+$(this).html()},
        type: 'POST',
        success: function(data) {
            //Write to #output
            $("#output").append($("<li>", { html: data }));
        }
    });
});

jsfiddle de démonstration - Version 1.4

Vous pouvez envelopper tous que la complexité en fonction pour faire un simple appel qui ressemble à ceci:

loadSequantially(['/a', '/a/b', 'a/b/c'], function() {alert('all loaded')});

Ci-dessous est un croquis (exemple de travail, à l'exception de l'appel ajax). Ceci peut être modifié pour utiliser une file d'attente-comme la structure au lieu d'un tableau

  //load sequentially the given array of URLs and call 'funCallback' when all's done
  function loadSequantially(arrUrls, funCallback) {
     var idx = 0;

     //callback function that is called when individual ajax call is done
     //internally calls next ajax URL in the sequence, or if there aren't any left,
     //calls the final user specified callback function
     var individualLoadCallback = function()   {
        if(++idx >= arrUrls.length) {
           doCallback(arrUrls, funCallback);
        }else {
           loadInternal();
        }
     };

     //makes the ajax call
     var loadInternal = function() {
        if(arrUrls.length > 0)  {
           ajaxCall(arrUrls[idx], individualLoadCallback);
        }else {
           doCallback(arrUrls, funCallback);
        }
     };

     loadInternal();
  };

  //dummy function replace with actual ajax call
  function ajaxCall(url, funCallBack) {
     alert(url)
     funCallBack();
  };

  //final callback when everything's loaded
  function doCallback(arrUrls, func)   {
     try   {
        func();
     }catch(err) {
        //handle errors
     }
  };

Ouais, tandis que les autres réponses, elles sont beaucoup de code et désordonné. Frame.js a été conçu pour élégamment remédier à cette situation. https://github.com/bishopZ/Frame.js

Par exemple, ce sera la cause de la plupart des navigateurs pour bloquer:

for(var i=0; i<1000; i++){
    $.ajax('myserver.api', { data:i, type:'post' });
}

Bien que ce ne sera pas:

for(var i=0; i<1000; i++){
    Frame(function(callback){
        $.ajax('myserver.api', { data:i, type:'post', complete:callback });
    });
}
Frame.start();

Aussi, en utilisant le Cadre vous permet de chute d'eau de la réponse des objets et de les traiter tous, après l'intégralité de la série de la requête AJAX ont terminé (si vous voulez):

var listOfAjaxObjects = [ {}, {}, ... ]; //an array of objects for $.ajax
$.each(listOfAjaxObjects, function(i, item){
    Frame(function(nextFrame){ 
        item.complete = function(response){
            //do stuff with this response or wait until end
            nextFrame(response); //ajax response objects will waterfall to the next Frame()
        $.ajax(item);
    });
});
Frame(function(callback){ //runs after all the AJAX requests have returned
    var ajaxResponses = [];
    $.each(arguments, function(i, arg){
        if(i!==0){ //the first argument is always the callback function
            ajaxResponses.push(arg);
        }
    });
    //do stuff with the responses from your AJAX requests
    //if an AJAX request returned an error, the error object will be present in place of the response object
    callback();
});
Frame.start()

- Je utiliser http://developer.yahoo.com/yui/3/io/#queue pour obtenir cette fonctionnalité.

Les seules solutions que je peux venir avec est, comme vous le dites, le maintien d'une liste d'attente des appels et de rappels. Ou de nidification le prochain appel dans le précédent rappel, mais qui se sent un peu en désordre.

Je dirais même un peu plus sophistiqué de l'approche qui est réutilisable pour les différents cas.

Je l'utilise pour l'exemple, quand j'ai besoin de ralentir une séquence d'appel lorsque l'utilisateur tape dans l'éditeur de texte.

Mais je suis sûr que ça devrait aussi fonctionner lors d'une itération à travers la collection. Dans ce cas, on peut la file d'attente de demandes, et peut envoyer un seul appel AJAX au lieu de 12.

queueing = {
    callTimeout:                 undefined,
    callTimeoutDelayTime:        1000,
    callTimeoutMaxQueueSize:     12,
    callTimeoutCurrentQueueSize: 0,

    queueCall: function (theCall) {
        clearTimeout(this.callTimeout);

        if (this.callTimeoutCurrentQueueSize >= this.callTimeoutMaxQueueSize) {
            theCall();
            this.callTimeoutCurrentQueueSize = 0;
        } else {
            var _self = this;

            this.callTimeout = setTimeout(function () {
                theCall();
                _self.callTimeoutCurrentQueueSize = 0;
            }, this.callTimeoutDelayTime);
        }

        this.callTimeoutCurrentQueueSize++;
    }
}