Очередь ajax-запросов с использованием jQuery.queue ()

Question

Я впервые использую jQuery.queue () и не совсем понял.Может ли кто-нибудь указать, что я делаю неправильно?

Глядя в firebug, я все еще вижу, что мои POST-запросы запускаются одновременно - поэтому мне интересно, вызываю ли я dequeue () неправильноplace.

Также - как я могу получить длину очереди?

Причина, по которой мне нужно поставить в очередь эти запросы, заключается в том, что они запускаются при нажатии кнопки.И пользователь может быстро нажимать несколько кнопок.

Пытался вырезать основную структуру моего кода:

$("a.button").click(function(){
   $(this).doAjax(params);
});

// method
doAjax:function(params){ 

   $(document).queue("myQueueName", function(){
     $.ajax({
       type: 'POST',
       url: 'whatever.html',
       params: params,
       success: function(data){
         doStuff;

         $(document).dequeue("myQueueName");
       }
     });
   });

}

Answer 1

Вот мое решение, которое я использую для создания очереди запросов для некоторой игры Browsergame. Если что-то случится, я остановлю эту очередь и завершу работу с каким-то специальным последним запросом или очисткой.

var get_array = ["first", "second", "third"];

var worker = $("<div />"); // to line up requests in queue
$.queuedAjax = function(args){  // add up requests for me       
    worker.queue(
        function(next){
            $.ajax(args).always(next);            
        }
    );
  };

$.queuedSomething = function(){ // add up something special for me
    worker.queue(
        function(next){
            //worker.clearQueue();
            //worker = $("<div />"); //cleanup for next .each
            //maybe another .each           
        }
    );
  };

$.each( get_array , function( key , value ) {
  $.queuedAjax({
    type: 'GET',
    url: '/some.php?get='+value,
    dataType: 'text',
    success: function(sourcecode){

        if (sourcecode.match(/stop your requests, idiot!/)) {   
            worker.clearQueue().queue($.queuedSomething);
            alert(' the server told me to stop. i stopped all but not the last ´$.queuedSomething()´ ');
        }

    }
  });           
}); 
$.queuedSomething();

Answer 2

Мне также пришлось сделать это в рамках решения, которое у меня было, и я обнаружил, что могу сделать это следующим образом:

//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");
}

с помощью обратного вызова next(), который передается в функцию очереди, которую вы можете удалить из очереди.следующая операция.Таким образом, помещая следующее в обработчики для ajax, вы фактически делаете вызовы ajax асинхронными с браузером и потоком рендеринга или рисования браузера, но делаете их синхронными или сериализованными друг с другом.

Вот очень простой пример. В примере скрипта.Нажмите кнопку один раз и подождите секунду.Вы увидите, что срабатывает тайм-аут и происходит одна операция.Затем нажмите кнопку как можно быстрее (или быстрее, чем на одну секунду), и вы увидите, что каждый раз, когда вы нажимаете кнопку, операции ставятся в очередь, а затем только после секундного ожидания они попадают на страницу и исчезают через один раз.другой.

Прелесть этого в том, что, если очередь уже очищается, все операции, которые вы добавляете в нее во время ее опустошения, помещаются в конец, а затем просто обрабатываются, когда придет время.