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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
js 操作select相关方法函数
Dec 06 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jquery常用的12个小功能
Jul 22 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
js前端图片加载异常兜底方案
Jun 21 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
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
教师对学生的评语
2014/04/28 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
文明单位创建材料
2014/12/24 职场文书
大学军训决心书
2015/02/05 职场文书
龙猫观后感
2015/06/09 职场文书
高二化学教学反思
2016/02/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
在Python中如何使用yield
2021/06/07 Python