jquer之ajaxQueue简单实现代码


Posted in Javascript onSeptember 15, 2011

没什么复杂的东西,就是用个array对象来做队列,维护ajax请求的顺序。下面给出代码:

;(function($) { 
$.ajaxQueue = { 
// 管理ajax请求的队列 
requests: new Array(), 
// 把待发送的ajax请求加入队列 
offer: function(options) { 
var _self = this, 
// 对complete,beforeSend方法进行“劫持”,加入队列处理方法poll 
xhrOptions = $.extend({}, options, { 
// 如果请求完成,发送下一个请求 
complete: function(jqXHR, textStatus) { 
if(options.complete) 
options.complete.call(this, jqXHR, textStatus); 
_self.poll(); 
}, 
// 如果请求被取消,继续发送下一个请求 
beforeSend: function(jqXHR, settings) { 
if(options.beforeSend) 
var ret = options.beforeSend.call(this, jqXHR, settings); 
if(ret === false) { 
_self.poll(); 
return ret; 
} 
} 
}); 
this.requests.push(xhrOptions); 
if(this.requests.length == 1) { 
$.ajax(xhrOptions); 
} 
}, 
// 用FIFO方式发送ajax请求 
poll: function() { 
if(this.isEmpty()) { 
return null; 
} 
var processedRequest = this.requests.shift(); 
var nextRequest = this.peek(); 
if(nextRequest != null) { 
$.ajax(nextRequest); 
} 
return processedRequest; 
}, 
// 返回队列头部的ajax请求 
peek: function() { 
if(this.isEmpty()) { 
return null; 
} 
var nextRequest = this.requests[0]; 
return nextRequest; 
}, 
// 判断队列是否为空 
isEmpty: function() { 
return this.requests.length == 0; 
} 
} 
})(jQuery);

使用的话就是$.ajaxQueue.offer(settings),settings的配置和jQuery文档的一致。
如果您感兴趣,可以点击我的jsFiddle share进行在线运行,修改等。最后有什么问题,欢迎提出交流 :)

Javascript 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
js substr、substring和slice使用说明小记
Sep 15 #Javascript
javascript 闭包
Sep 15 #Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 #Javascript
document.getElementById介绍
Sep 13 #Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
You might like
PHP 类型转换函数intval
2009/06/20 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
浅谈python中的变量默认是什么类型
2016/09/11 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
高山背包:High Sierra
2017/11/23 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
翻译专业应届生求职信
2013/11/23 职场文书
文明寝室标语
2014/06/13 职场文书
英语教师个人工作总结
2015/02/09 职场文书
大学运动会加油稿
2015/07/22 职场文书