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 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
解决vue 表格table列求和的问题
Nov 06 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
MVC模式的PHP实现
2006/10/09 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
行政主管岗位职责
2013/11/18 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
加油口号大全
2014/06/13 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Go语言基础知识点介绍
2021/07/04 Golang