File d'attente des requêtes ajax à l'aide de jQuery.la file d'attente()

Vous le problème, ici, c'est que .ajax() déclenche un système exécutant une requête Ajax. Cela signifie que, .ajax() retourne immédiatement, sans blocage. Si votre file d'attente de l'fonctions, mais ils feront feu presque en même temps, comme vous l'avez décrit.

Je ne pense pas que le .queue() est un bon endroit pour faire des requêtes ajax, c'est plus destiné pour l'utilisation de fx methods. Vous avez besoin d'un simple gestionnaire.

var ajaxManager = (function() {
     var requests = [];

     return {
        addReq:  function(opt) {
            requests.push(opt);
        },
        removeReq:  function(opt) {
            if( $.inArray(opt, requests) > -1 )
                requests.splice($.inArray(opt, requests), 1);
        },
        run: function() {
            var self = this,
                oriSuc;

            if( requests.length ) {
                oriSuc = requests[0].complete;

                requests[0].complete = function() {
                     if( typeof(oriSuc) === 'function' ) oriSuc();
                     requests.shift();
                     self.run.apply(self, []);
                };   

                $.ajax(requests[0]);
            } else {
              self.tid = setTimeout(function() {
                 self.run.apply(self, []);
              }, 1000);
            }
        },
        stop:  function() {
            requests = [];
            clearTimeout(this.tid);
        }
     };
}());

C'est loin d'être parfaite, je veux juste démontrer que le chemin à parcourir. L'exemple ci-dessus pourrait être utilisé comme

$(function() {
    ajaxManager.run(); 

    $("a.button").click(function(){
       ajaxManager.addReq({
           type: 'POST',
           url: 'whatever.html',
           data: params,
           success: function(data){
              //do stuff
           }
       });
    });
});

- Je utiliser ce code très simple pour garder les appels ajax de "dépasser" les uns des autres.

var dopostqueue = $({});
function doPost(string, callback)
{
    dopostqueue.queue(function()
    {
        $.ajax(
        {   
            type: 'POST',
            url: 'thephpfile.php',
            datatype: 'json',
            data: string,
            success:function(result) 
            {
                dopostqueue.dequeue();
                callback(JSON.parse(result));
            }
        })
    });
}

Si vous ne voulez pas la file d'attente pour gérer lui-même, vous pouvez simplement supprimer le dequeue à partir de la fonction et de l'appeler à partir d'une autre fonction.
Pour obtenir la longueur de file d'attente, pour cet exemple, il serait:

dopostqueue.queue().length

J'ai trouvé les solutions ci-dessus un peu compliqués, plus j'ai besoin de modifier la demande juste avant de l'envoyer (la mise à jour de nouvelles données jeton).

Alors j'ai mis ce un ensemble. Source: https://gist.github.com/2470554

/* 

Allows for ajax requests to be run synchronously in a queue

Usage::

var queue = new $.AjaxQueue();

queue.add({
  url: 'url',
  complete: function() {
    console.log('ajax completed');
  },
  _run: function(req) {
    //special pre-processor to alter the request just before it is finally executed in the queue
    req.url = 'changed_url'
  }
});

*/

$.AjaxQueue = function() {
  this.reqs = [];
  this.requesting = false;
};
$.AjaxQueue.prototype = {
  add: function(req) {
    this.reqs.push(req);
    this.next();
  },
  next: function() {
    if (this.reqs.length == 0)
      return;

    if (this.requesting == true)
      return;

    var req = this.reqs.splice(0, 1)[0];
    var complete = req.complete;
    var self = this;
    if (req._run)
      req._run(req);
    req.complete = function() {
      if (complete)
        complete.apply(this, arguments);
      self.requesting = false;
      self.next();
    }

    this.requesting = true;
    $.ajax(req);
  }
};

Une autre version de jAndy réponse, sans timer.

var ajaxManager = {
    requests: [],
    addReq: function(opt) {
        this.requests.push(opt);

        if (this.requests.length == 1) {
            this.run();
        }
    },
    removeReq: function(opt) {
        if($.inArray(opt, requests) > -1)
            this.requests.splice($.inArray(opt, requests), 1);
    },
    run: function() {
        //original complete callback
        oricomplete = this.requests[0].complete;

        //override complete callback
        var ajxmgr = this;
        ajxmgr.requests[0].complete = function() {
             if (typeof oricomplete === 'function')
                oricomplete();

             ajxmgr.requests.shift();
             if (ajxmgr.requests.length > 0) {
                ajxmgr.run();
             }
        };

        $.ajax(this.requests[0]);
    },
    stop: function() {
        this.requests = [];
    },
}

À Utiliser:

$(function() {
    $("a.button").click(function(){
       ajaxManager.addReq({
           type: 'POST',
           url: 'whatever.html',
           data: params,
           success: function(data){
              //do stuff
           }
       });
    });
});

J'ai également eu à le faire au sein d'une solution que j'ai eu et j'ai trouvé que je pouvais le faire de cette façon:

//A variable for making sure to wait for multiple clicks before emptying.
var waitingTimeout; 

$("a.button").click(function(){
   $(this).doAjax(params);
   clearTimeout(waitingTimeout);
   waitingTimeout = setTimeout(function(){noMoreClicks();},1000);
});

//method
doAjax:function(params){ 

   $(document).queue("myQueueName", function(next){
     $.ajax({
       type: 'POST',
       url: 'whatever.html',
       data: params,
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(data){
         doStuff;
         next();
       },
       failure: function(data){
         next();
       },
       error: function(data){
         next();
       }
     });
   });

}

function noMoreClicks(){
    $(document).dequeue("myQueueName");
}

à l'aide de la next() de callback qui est passé dans la file d'attente de fonction, vous pouvez retirer de l'opération suivante. Donc en les mettant ensuite, les gestionnaires de l'ajax, vous pouvez effectivement faire les appels ajax asynchrone pour le navigateur et le rendu ou de la peinture au fil de l'navigateur, mais de les rendre synchrone ou sérialisé les uns aux autres.

Voici un exemple de base. Dans l'exemple de violon. Cliquez sur le bouton une fois et attendre une seconde. Vous verrez que le temps de déclencheurs et de la seule opération qui se passe. Ensuite, cliquez sur le bouton aussi vite que vous le pouvez (ou plus rapide qu'une seconde) et vous verrez que toutes les fois que vous cliquez sur le bouton, les opérations sont mises en file d'attente, puis seulement après une attente d'une seconde, ils ont frappé la page et à la décoloration, l'un après l'autre.

La beauté de ceci est que si la file d'attente est déjà vidange, toutes les opérations que vous ajoutez à ça alors que c'est la vidange sont placés sur la fin et puis juste transformé le moment venu.

juste un autre exemple de multi threaded file de coureur que j'ai écrit pour nodejs. Vous pourriez adapter à jquery ou angulaire. Les promesses sont légèrement différents dans chaque API. J'ai utilisé ce modèle pour des choses comme l'extraction de tous les éléments de grandes listes de SharePoint par la création de plusieurs requêtes pour extraire toutes les données et de permettre 6 à la fois, pour éviter serveur imposées par la limitation des limites.

/*
Job Queue Runner (works with nodejs promises): Add functions that return a promise, set the number of allowed simultaneous threads, and then run
(*) May need adaptation if used with jquery or angular promises
Usage:
var sourcesQueue = new QueueRunner('SourcesQueue');
sourcesQueue.maxThreads = 1;
childSources.forEach(function(source) {
sourcesQueue.addJob(function() { 
//Job function - perform work on source
});
}
sourcesQueue.run().then(function(){
//Queue complete...
});
*/
var QueueRunner = (function () {
function QueueRunner(id) {
this.maxThreads = 1; //Number of allowed simultaneous threads
this.jobQueue = [];
this.threadCount = 0;
this.jobQueueConsumer = null;
this.jobsStarted = 0;
if(typeof(id) !== 'undefined') {
this.id = id;
}
else {
this.id = 'QueueRunner';
}
}    
QueueRunner.prototype.run = function () {
var instance = this;        
return new Promise(function(resolve, reject) {
instance.jobQueueConsumer = setInterval(function() {
if(instance.threadCount < instance.maxThreads && instance.jobQueue.length > 0) {
instance.threadCount++;
instance.jobsStarted++;
//Remove the next job from the queue (index zero) and run it
var job = instance.jobQueue.splice(0, 1)[0];
logger.info(instance.id + ': Start job ' + instance.jobsStarted + ' of ' + (instance.jobQueue.length + instance.jobsStarted));
job().then(function(){
instance.threadCount--;
}, function(){
instance.threadCount--;
});
}
if(instance.threadCount < 1 && instance.jobQueue.length < 1) {
clearInterval(instance.jobQueueConsumer);
logger.info(instance.id + ': All jobs done.');
resolve();
}
}, 20);
});     
};
QueueRunner.prototype.addJob = function (func) {
this.jobQueue.push(func);
};
return QueueRunner;
}());