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生成缩略图后上传并利用canvas重绘
May 15 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
探索node之事件循环的实现
Oct 30 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP实时显示输出
2008/10/02 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
php cookis创建实现代码
2009/03/16 PHP
PHP Directory 函数的详解
2013/03/07 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js原型链原理看图说明
2012/07/07 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js跳转页面方法总结
2014/01/29 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python中sys.argv函数精简概括
2018/07/08 Python
关于python多重赋值的小问题
2019/04/17 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
详解Python中import机制
2020/09/11 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
部队学习十八大感言
2014/01/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014年司法所工作总结
2014/11/22 职场文书
合同审查法律意见书
2015/06/04 职场文书