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弹出层代码
Sep 24 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 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入门学习的几个不错的实例代码
2008/07/13 PHP
PHP eval函数使用介绍
2013/12/08 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
全面了解JS中的匿名函数
2016/06/29 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
四好少年事迹材料
2014/01/12 职场文书
办公室主任先进事迹
2014/01/18 职场文书
演讲稿的写法
2014/05/19 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
素质教育学习心得体会
2016/01/19 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis