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去掉字符串里的所有空格
Feb 08 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
javascript时间差插件分享
Jul 18 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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在字符串中查找另一个字符串
2008/11/19 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
Javascript实现的分页函数
2007/02/07 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python爬虫实例扒取2345天气预报
2018/03/04 Python
详解Python_shutil模块
2019/03/15 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python集合操作方法详解
2020/02/09 Python
python字符串的index和find的区别详解
2020/06/20 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
水利学院求职自荐书
2014/02/01 职场文书
无偿献血倡议书
2014/04/14 职场文书
委托书的格式
2014/08/01 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
拉贝日记观后感
2015/06/05 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
师德师风培训感言
2015/08/03 职场文书
解除合同协议书范本
2016/03/21 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
pycharm代码删除恢复的方法
2021/06/26 Python