jquery Ajax Queue 隊列實現

時間 2019-11-13

原文原文鏈接

有時候咱們須要按順序調用一組ajax，這些ajax須要有前後順序，相似於同步的ajax，那麼咱們能夠經過如下的方式來實現：javascript

(這個Ajax用到jQuery.post) html

//定義一個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;
};

使用方法:java

首先建立一個Ajax隊列，而後爲這個Ajax隊列，添加須要執行的ajax操做(post操做)，這些Ajax會按順序執行，一個執行完畢以後(得到返回值)，再繼續執行下一個。ajax

$.newAjaxQueue().post( [URL] , [參數] ,[回調函數] ).post( [URL] , [參數] ,[回調函數] ).post( [URL] , [參數] ,[回調函數] );app

這個實現沒有考慮到超時等狀況，若是須要能夠本身添加。dom

演示例子：函數

<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> post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。