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中的事件
Sep 23 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
domReady的实现案例
2016/11/23 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
python写日志封装类实例
2015/06/28 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python实现车牌识别的示例代码
2019/08/05 Python
公积金转移接收函
2014/01/11 职场文书
绿色学校实施方案
2014/03/31 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
公务员考察材料
2014/12/23 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016年春节问候语
2015/11/11 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
搭建Yolov5服务器
2022/04/30 Servers