Séquence des requêtes ajax

une solution rapide et petite en utilisant des promesses différées. Bien que cela utilise le $.Deferred de jQuery , n'importe quel autre devrait faire.

var Queue = function () {
    var previous = new $.Deferred().resolve();

    return function (fn, fail) {
        return previous = previous.then(fn, fail || fn);
    };
};

utilisation, appel pour créer de nouvelles files d'attente:

var queue = Queue();

// Queue empty, will start immediately
queue(function () {
    return $.get('/first');
});

// Will begin when the first has finished
queue(function() {
    return $.get('/second');
});

voir l'exemple avec une comparaison côte à côte des requêtes asynchrones.

vous pouvez envelopper toute cette complexité dans une fonction pour faire un appel simple qui ressemble à ceci:

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

ci-dessous est un croquis grossier (exemple de travail, sauf l'appel ajax). Ceci peut être modifié pour utiliser une structure de type queue 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
     }
  };

idéalement, une coroutine avec plusieurs points d'entrée de sorte que chaque rappel du serveur peut appeler la même coroutine sera soigné. Merde, C'est sur le point d'être implémenté en Javascript 1.7.

laissez-moi essayer la fermeture...

function BlockingAjaxCall (URL,arr,AjaxCall,OriginalCallBack)
{    
     var nextindex = function()
     {
         var i =0;
         return function()
         {
             return i++;
         }
     };

     var AjaxCallRecursive = function(){
             var currentindex = nextindex();
             AjaxCall
             (
                 URL,
                 arr[currentindex],
                 function()
                 {
                     OriginalCallBack();
                     if (currentindex < arr.length)
                     {
                         AjaxCallRecursive();
                     }
                 }
             );
     };
     AjaxCallRecursive();    
}
// suppose you always call Ajax like AjaxCall(URL,element,callback) you will do it this way
BlockingAjaxCall(URL,myArray,AjaxCall,CallBack);

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

par exemple, cela causera la suspension de la plupart des navigateurs:

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

alors 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, L'utilisation de cadre vous permet de waterfall les objets de réponse et de traiter avec eux tous après le toute la série de la demande AJAX ont complété (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()

j'utilise http://developer.yahoo.com/yui/3/io/#queue pour obtenir cette fonctionnalité.

les seules solutions que je peux trouver sont, comme vous le dites, la tenue d'une liste des appels / rappels en attente. Ou imiter le prochain appel dans le rappel précédent, mais ça sent un peu le désordre.

vous pouvez obtenir la même chose en utilisant then .

var files = [
  'example.txt',
  'example2.txt',
  'example.txt',
  'example2.txt',
  'example.txt',
  'example2.txt',
  'example2.txt',
  'example.txt'
];

nextFile().done(function(){
  console.log("done",arguments)
});

function nextFile(text){
  var file = files.shift();
  if(text)
    $('body').append(text + '<br/>');
  if(file)
    return $.get(file).then(nextFile);
}

http://plnkr.co/edit/meHQHU48zLTZZHMCtIHm?p=preview

je poste cette réponse pensant qu'elle pourrait aider d'autres personnes à l'avenir, à la recherche de quelques solutions simples dans le même scénario.

c'est maintenant possible aussi en utilisant le support natif de promesse introduit dans ES6. Vous pouvez placer l'appel ajax dans une promesse et de le retourner au gestionnaire de l'élément.

function ajaxPromise(elInfo) {
    return new Promise(function (resolve, reject) {
        //Do anything as desired with the elInfo passed as parameter

        $.ajax({
            type: "POST",
            url: '/someurl/',
            data: {data: "somedata" + elInfo},
            success: function (data) {
                //Do anything as desired with the data received from the server,
                //and then resolve the promise
                resolve();
            },
            error: function (err) {
                reject(err);
            },
            async: true
        });

    });
}

appelez maintenant la fonction de façon récursive, d'où vous avez la collection des éléments.

function callAjaxSynchronous(elCollection) {
    if (elCollection.length > 0) {
        var el = elCollection.shift();
        ajaxPromise(el)
        .then(function () {
            callAjaxSynchronous(elCollection);
        })
        .catch(function (err) {
            //Abort further ajax calls/continue with the rest
            //callAjaxSynchronous(elCollection);
        });
    }
    else {
        return false;
    }
}

je suggère une approche un peu plus sophistiquée qui est réutilisable pour 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 qu'il devrait également fonctionner lors de l'itération à travers la collection. Dans ce cas, il peut mettre en file d'attente les requêtes et 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++;
    }
}