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 相关文章推荐
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
JS实现li标签的删除
Apr 12 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 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递归删除目录与文件的方法
2015/01/30 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
教师实习期自我鉴定
2013/10/06 职场文书
大专毕业生自我评价分享
2013/11/10 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
群教班子对照检查材料
2014/08/26 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
骨干教师考核评语
2014/12/31 职场文书
二审答辩状格式
2015/05/22 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
2016银行求职自荐信
2016/01/28 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技