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创建DOM元素实例解析
Jan 19 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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 数学运算验证码实现代码
2009/10/11 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2014年后勤工作总结
2014/11/18 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年环保局工作总结
2015/05/22 职场文书
酒桌上的开场白
2015/06/01 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
MySQL学习必备条件查询数据
2022/03/25 MySQL