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');

});