Ajax请求一步一步

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();  
});