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] , [参数] ,[回调函数] );

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

演示例子：

//打印输出的测试方法
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>

巴特西

jquery Ajax Queue 队列实现

最新文章

热门文章