jquer之ajaxQueue简单实现代码

162 阅读 0 评论 107 点赞

我是靠谱客的博主追寻毛巾，最近开发中收集的这篇文章主要介绍jquer之ajaxQueue简单实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

没什么复杂的东西，就是用个array对象来做队列，维护ajax请求的顺序。下面给出代码：

复制代码代码如下:

 
;(function($) { 
$.ajaxQueue = { 
// 管理ajax请求的队列 
requests: new Array(), 
// 把待发送的ajax请求加入队列 
offer: function(options) { 
var _self = this, 
// 对complete，beforeSend方法进行“劫持”，加入队列处理方法poll 
xhrOptions = $.extend({}, options, { 
// 如果请求完成，发送下一个请求 
complete: function(jqXHR, textStatus) { 
if(options.complete) 
options.complete.call(this, jqXHR, textStatus); 
_self.poll(); 
}, 
// 如果请求被取消，继续发送下一个请求 
beforeSend: function(jqXHR, settings) { 
if(options.beforeSend) 
var ret = options.beforeSend.call(this, jqXHR, settings); 
if(ret === false) { 
_self.poll(); 
return ret; 
} 
} 
}); 
this.requests.push(xhrOptions); 
if(this.requests.length == 1) { 
$.ajax(xhrOptions); 
} 
}, 
// 用FIFO方式发送ajax请求 
poll: function() { 
if(this.isEmpty()) { 
return null; 
} 
var processedRequest = this.requests.shift(); 
var nextRequest = this.peek(); 
if(nextRequest != null) { 
$.ajax(nextRequest); 
} 
return processedRequest; 
}, 
// 返回队列头部的ajax请求 
peek: function() { 
if(this.isEmpty()) { 
return null; 
} 
var nextRequest = this.requests[0]; 
return nextRequest; 
}, 
// 判断队列是否为空 
isEmpty: function() { 
return this.requests.length == 0; 
} 
} 
})(jQuery); 