JQuery

1个成员

jQuery AjaxQueue 实例详解

发表于 2017-02-05 3537 次查看
提供一个简单的jQuery AjaxQueue 实例详解,主要讲到了管理ajax请求的发送顺序等,原理是如果前一个请求未返回,新的请求发出,那么撤销前一个请求,也就是新的请求“覆盖”原请求,有需要的朋友可以参考一下。

complete回调在jquery1.5以后可以是一个函数数组,按数组顺序调用。
如果前一个请求未返回,新的请求发出,那么撤销前一个请求,也就是新的请求“覆盖”原请求。
写成面向对象的形式,再用一个AjaxManage进行简单的管理。

 代码如下 复制代码

;(function($) {
        // override:新的请求是否要覆盖之前的请求
 function AjaxQueue(override) {
  this.override = !!override;
 };
 
 AjaxQueue.prototype = {
  
  requests: new Array(),
  
  offer: function(options) {
   var _self = this;
   
   var xhrOptions = $.extend({}, options, {
    complete: function(jqXHR, textStatus) {
                                        // 支持complete是函数数组的情况
     if($.isArray(options.complete)) {
      
      var funcs = options.complete;
      for(var i = 0, len = funcs.length; i < len; i++)
       funcs[i].call(this, jqXHR, textStatus);
     
     } else {
      
      if(options.complete)
       options.complete.call(this, jqXHR, textStatus);           
     }

                                        // 处理结束,从队列中发出下一个ajax请求
     _self.poll();
    },
     
    beforeSend: function(jqXHR, settings) {
       if(options.beforeSend)
        var ret = options.beforeSend.call(this, jqXHR, settings);
       // 如果当前ajax请求因为某些原因被撤销了,那么去发下一个ajax请求
       if(ret === false) {
        _self.poll();
        return ret;
       }
    }
   });
   
                        // 如果支持覆盖,那么调用replace
   if(this.override) {
    // console.log('go override');
    this.replace(xhrOptions);
                        // 反之放入队列
   } else {
    // console.log('go queue');
    this.requests.push(xhrOptions);
  
    if(this.requests.length == 1) {
     $.ajax(xhrOptions);
    }
   }
  },
  
                // 撤销前一个请求,发送新的请求
  replace: function(xhrOptions) {
   var prevRet = this.peek();
   if(prevRet != null) {
        // jquery源码中可以看到此方法
                             prevRet.abort();
   }
   
   this.requests.shift();
   this.requests.push($.ajax(xhrOptions));
  },
  
                // 轮询队列 发送下一个请求
  poll: function() {
   if(this.isEmpty()) {
    return null;   
   }
 
   var processedRequest = this.requests.shift();
   var nextRequest = this.peek();
   if(nextRequest != null) {
    $.ajax(nextRequest);
   }
 
   return processedRequest;
  },
  
                // 返回队列头部的请求
  peek: function() {
   if(this.isEmpty()) {
    return null;
   }
   
   var nextRequest = this.requests[0];
   return nextRequest;
  },
  
                // 判断队列是否为空
  isEmpty: function() {
   return this.requests.length == 0;
  }
 };
 
 var queue = {};
 
        // 管理AjaxQueue的简单对象 
 var AjaxManager = {
                // 创建新的ajaxQueue   
  createQueue: function(name, override) {
   return queue[name] = new AjaxQueue(override);
  },
  
                // 清除对应name的ajaxQueue
  destroyQueue: function(name) {
   if(queue[name]) {
    queue[name] = null;
    delete queue[name];
   }
  },
  
                // 根据name得到对应的ajaxQueue
  getQueue: function(name) {
   return ( queue[name] ? queue[name] : null);
  }
 };
 
        // 跟jQuery关联起来,给个简称,方便调用
 $.AM = AjaxManager;
})(jQuery);


其实也想再加上done,fail,always等配置,但或许会变得有点复杂,就先保持简单

这里有两个我的jsfiddle页面,一个是覆盖效果的,一个是队列效果的,可以直接测试运行。

 

发表回复
你还没有登录,请先登录注册