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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
手写实现JS中的new
Nov 07 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
php实现微信发红包
2015/12/05 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Python2.x中文乱码问题解决方法
2015/06/02 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python实现学生成绩管理系统
2020/04/05 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
广告学专业毕业生自荐信
2013/09/24 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
高三语文教学反思
2014/01/15 职场文书
创优争先心得体会
2014/09/11 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android