jQuery AjaxQueue改进步骤


Posted in Javascript onOctober 06, 2011

假期里没事就想着改进下,改得地方不多,主要有以下三点:
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页面,一个是覆盖效果的,一个是队列效果的,可以直接测试运行。
就到这里,如有问题,欢迎指出,thanks。
Javascript 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
json2.js的初步学习与了解
Oct 06 #Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 #Javascript
event.X和event.clientX的区别分析
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 #Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 #Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP教程 预定义变量
2009/10/23 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
银行内勤岗位职责
2014/04/09 职场文书
产品发布会策划方案
2014/05/12 职场文书
办公室日常管理制度
2015/08/04 职场文书
小学语文教师研修日志
2015/11/13 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python