您的位置：首页 > Web前端 > JQuery

jquery Ajax Queue 队列实现

2013-09-12 18:05 295 查看

有时候我们需要按顺序调用一组ajax，这些ajax需要有先后顺序，类似于同步的ajax，那么我们可以通过以下的方式来实现：

(这个Ajax用到jQuery.post)

//定义一个AJAX队列
$.newAjaxQueue = function() {
var queue = [],posting=false, fn = function() {
if(queue.length){
posting = true;
var request = queue.shift();
var url = request.url;
var params = request.params;
var callback = request.callback;
if (typeof(params) === 'function') {
callback = params;
params = {};
}
$.post(url, params, function(response, status, xhr) {
try{
if (typeof(callback) === 'function') {
callback(response);
}
}finally{
fn();
posting = false;
}
}, 'text');
}
},instance = ({
post: function(url,params,callback){
queue.push({
url:url,params:params,callback:callback
});
if(posting===false){
fn();
}
return instance;
}
});
return instance;
};

使用方法:

首先创建一个Ajax队列，然后为这个Ajax队列，添加需要执行的ajax操作(post操作)，这些Ajax会按顺序执行，一个执行完毕之后(获得返回值)，再继续执行下一个。

$.newAjaxQueue().post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] );

这个实现没有考虑到超时等情况，如果需要可以自己添加。

演示例子：

<html>
<body>

<script type="text/javascript">
//这个地方应该引用jQuery，此处只是个测试的例子，提供一个$.post方法。
var $={post:function(url,params,callback){setTimeout(function(){callback('{}' + url);},(Math.random()*1000)>>0);}}

//打印输出的测试方法
var log = function(info){
var div = document.createElement('div');
div.innerHTML=info;
document.body.appendChild(div);
}

//定义一个AJAX队列 $.newAjaxQueue = function() { var queue = [],posting=false, fn = function() { if(queue.length){ posting = true; var request = queue.shift(); var url = request.url; var params = request.params; var callback = request.callback; if (typeof(params) === 'function') { callback = params; params = {}; } $.post(url, params, function(response, status, xhr) { try{ if (typeof(callback) === 'function') { callback(response); } }finally{ fn(); posting = false; } }, 'text'); } },instance = ({ post: function(url,params,callback){ queue.push({ url:url,params:params,callback:callback }); if(posting===false){ fn(); } return instance; } }); return instance; };

//测试队列的执行
$.newAjaxQueue().post('url1', {a:1},function(response){
log('test:1');
}).post('url2', {a:1},function(response){
log('test:2');
}).post('url3', {a:1},function(response){
log('test:3');
}).post('url4', {a:1},function(response){
log('test:4');
}).post('url5', {a:1},function(){
log('test:5');
});

</script></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航