jquery ajax 队列,jquery Ajax Queue 队列实现
有时候我们需要按顺序调用一组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] , [参数] ,[回调函数] );
这个实现没有考虑到超时等情况，如果需要可以自己添加。
演示例子：
//这个地方应该引用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');
});