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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery的map与get方法详解
Nov 04 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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扩展开发经验分享
2012/09/06 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
详解Python装饰器由浅入深
2016/12/09 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
毕业生自我鉴定
2013/12/04 职场文书
电脑教师的自我评价
2013/12/18 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
中标通知书范本
2015/04/17 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript