使用jQuery.queue()队列ajax请求

前端之家收集整理的这篇文章主要介绍了使用jQuery.queue()队列ajax请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我第一次使用jQuery.queue(),并没有完全掌握它。
有人可以指出什么im做错了吗?

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

}

预先感谢任何帮助。

解决方法

这里的问题是,.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',data: params,success: function(data){
              // do stuff
           }
       });
    });
});
原文链接:https://www.f2er.com/jquery/185244.html

猜你在找的jQuery相关文章