Question

我有超过100个ajax请求，特别是取决于它在页面上有多少.miniCanvas个类。当我收到之前的ajax响应时，我想发送下一个ajax请求。

这是我的代码：

$def(".miniCanvas").each(
        function()
        {
            getChartData($def(this));
        });
    function getChartData(me)
    {
        $def.ajax(
        {
            url:    'allmoves.php?path=getchart&'+me.attr('id'), 
            cache:  false,
            success:function(msg){handleChartData(msg, me)},
            error:  function(msg){alert('Error loading data.')} 
        }); 
    }
    function handleChartData(data, me)
    {
        var aData   =   new Array();
        id=me.children('div').attr('id');
        var plot1 = $def.jqplot (id, [JSON.parse(data)],
        {
            series:[{showMarker:false}],
            axesDefaults: {
                show: false,
                showTicks:false
            }
        });
    }

Answer 1

var GetCharData = function() {
    var queue = [],
        running = false,
        next = function() {
            running = false;
            if (queue.length) GetCharData(queue.shift());
        };

    return function(me) {
        if (running) return queue.push(me);
        running = true;
        $.ajax({
            url: 'allmoves.php?path=getchart&'+me.attr('id'),
            cache: false,
            success: function(msg) {
                // Handle Success
            },
            error: function(msg) {
                // Handle Failure
            },
            complete: next
        });
    };
}();

然后

$(".miniCanvas").each(function() { GetCharData($(this)); })

http://jsfiddle.net/robert/EHCW5/

Answer 2

你可以这样做：

http://jsfiddle.net/gx2yY/

基本上只保留一个每次递增的索引，每次获得AJAX结果时，都要为下一个元素调用AJAX。

注意：下面的代码说明了这个想法，但是为了在jsfiddle中工作，它与你的代码不匹配。

$(function(){
    var $ones=$(".one");
    var index=-1;

    function doNext(){
        if(++index >= $ones.length) return;

         var $this=$ones.eq(index);

         $.ajax({
            url:    '/echo/html/',
             data: {delay: 1},
            cache:  false,
            success:function(msg){
                $this.text("DONE");
                doNext();    
            },
            error:  function(msg){alert('Error loading data.')} 
        }); 
    }

    doNext();    
});

Ajax请求一步一步

2 个答案: