jquery - 使用 jQuery.queue() 对 ajax 请求进行队列

Question

我是第一次使用 jQuery.queue()，还没有完全掌握它。 有人可以指出我做错了什么吗？

查看 firebug，我仍然看到我的 POST 请求同时触发 - 所以我想知道我是否在错误的位置调用 dequeue()。

另外 - 我怎样才能获得队列长度？

我需要对这些请求进行排队的原因是它会在单击按钮时被触发。用户可以快速连续单击多个按钮。

尝试剥离我的代码的基本结构:

$("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

这里的问题是，.ajax() 触发异步运行的 Ajax 请求。这意味着，.ajax() 立即返回，非阻塞。因此，您对功能进行了排队，但它们几乎会像您所描述的那样同时触发。

我不认为 .queue() 是放置 ajax 请求的好地方，它更适合使用 fx 方法。您需要一个简单的经理。

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);
        }
     };
}());

这离完美还很远，我只是想演示一下要走的路。上面的例子可以这样使用

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

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