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之软键盘实现(js源码)
Jan 30 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
微信小程序异步处理详解
Nov 10 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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与javascript的两种交互方式
2006/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python版微信红包分配算法
2015/05/04 Python
在Django中创建第一个静态视图
2015/07/15 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python实现从wind导入数据
2019/12/03 Python
python enumerate内置函数用法总结
2020/01/07 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
求职自荐信的格式
2014/04/07 职场文书
员工试用期自我评价
2014/09/18 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers