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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
js浏览器html5表单验证
Oct 17 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
js实现九宫格布局效果
May 28 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
做一个有下拉功能的留言版
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
php学习 字符串课件
2008/06/15 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
js正确获取元素样式详解
2009/08/07 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
selenium+python实现自动登录脚本
2018/04/22 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
2014年秋季开学演讲稿
2014/05/24 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
评先进个人材料
2014/12/29 职场文书
升职自荐信范文
2015/03/27 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript