如何順序調用ajax函數

Question

    function loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd){
        var graphName=new Array();
        $('section div.graph_box').each(function(){
            if ($(this).css('display')=='block') {
                graphName.push($(this).attr('id'));
            }
        });
        for (index=0;index<graphName.length;index++) {
            switch (graphName[index]) {
                case 'allquery':
                    break;
                case 'alwazinc':
                    alwayzincreasing(calcSubStart,calcSubEnd,startDate,endDate);
                    break;
                case 'segment':
                    ajaxCallingSegment(startDate,endDate,calcSubStart,calcSubEnd);
                    break;
                case 'answeredresponse':
                   ajaxCallingSegmentRespDay(startDate,endDate,calcSubStart,calcSubEnd);
                    break;
                case 'segmentresponse':
                   ajaxCallingSegmentRespHours(startDate,endDate,calcSubStart,calcSubEnd);
                    break;
                case 'lessthanDonut':
                    ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'total');
                    ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'latency');
                    ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'delivery');
                    break;
                case 'carrierPie':
                    ajaxCallingCarrierPie(startDate,endDate,calcSubStart,calcSubEnd);
                    break;
            }

        }
    }

讓我解釋一下，我有.graph_box類，它顯示圖形。 當我更改日期loadGraphInSeq時，這些div的順序會改變，並且我想按順序加載圖，即直到並且除非加載了一個圖，否則不應調用其他函數。 switch語句中的函數調用該函數以加載圖形。 當前，此功能一次性加載所有功能。 graphName堆疊需要加載的所有圖名稱（未隱藏）。

Answer 1

您可以使用$ .get返回的延遲對象（或jQuery的任何其他XHR方法）。

使用您的代碼，我更新了示例。 異步和同步功能都應返回一個承諾。 異步（XHR請求）將自動解決或使您手動執行的同步失敗（包含在示例中）

//your synchronous function
function alwayzincreasing(calcSubStart,calcSubEnd,startDate,endDate){
  var deferred = $.Deferred();  
  deferred.resolve("to be passed to the next function");
  //do stuff here (non asynch);
  //return a promise
  return deferred.promise();
};
function ajaxCallingSegment(startDate,endDate,calcSubStart,calcSubEnd){
  //make sure you return the return value of $.ajax or $.get or $.post
  return $.get("url");//do not put unsuccess or anthing like that here
}
function loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd){
  var graphName=new Array(),fn=[],i=-1,len,p,d,e;
  $('section div.graph_box').each(function(){
    if ($(this).css('display')=='block') {
      graphName.push($(this).attr('id'));
    }
  });
  for (index=0;index<graphName.length;index++) {
    switch (graphName[index]) {
      case 'allquery':
        break;
      case 'alwazinc':
        fn.push(function(){
          return alwayzincreasing(calcSubStart,calcSubEnd,startDate,endDate);
        });
        break;
      case 'segment':
        fn.push(function(){
          return ajaxCallingSegment(startDate,endDate,calcSubStart,calcSubEnd);
        });
        break;
      case 'answeredresponse':
        fn.push(function(){
          return ajaxCallingSegmentRespDay(startDate,endDate,calcSubStart,calcSubEnd);
        });
        break;
      case 'segmentresponse':
        fn.push(function(){
          return ajaxCallingSegmentRespHours(startDate,endDate,calcSubStart,calcSubEnd);
        });
        break;
      case 'lessthanDonut':
        fn.push(function(){
          return ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'total');
        });
        fn.push(function(){
          return ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'latency');
        });
        fn.push(function(){
          return ajaxCallinglessthanDonut(startDate,endDate,calcSubStart,calcSubEnd,'delivery');
        });
        break;
      case 'carrierPie':
        fn.push(function(){
          return ajaxCallingCarrierPie(startDate,endDate,calcSubStart,calcSubEnd);
        });
        break;
    }
  }
  len = fn.length;
  d=jQuery.Deferred();
  p = d.promise();
  while(++i<len){
    p.then(fn[i]);
  }
  p.then(function(){
    console.log("done");
  },
  function(){
    console.log("Failed");
  });
  d.resolve();
}

Answer 2

這似乎是實現我想要的目標的很長的路要走，我已更改了loadGraphInSeq函數以僅返回函數名稱，並且在每個ajax函數獲取完要調用的下一個函數的名稱后調用了loadGraphInSeq函數，我加載了函數名稱根據div位置使用

$('section div.graph_box').each(function(){
                                if ($(this).css('display')=='block') {
                                    graphName.push($(this).attr('id'));
                                }
                            });

其中graphName是全局的，並按順序存儲div的名稱。 然后在ajax函數的每一端調用LoadGraphInSeq來調用下一個函數調用。

function loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd,graphNametoCall){
                switch (graphNametoCall) {
                    case 'allquery':
                        return(loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd,graphName[graphname++]));
                    case 'ajaxCallingAlwazIncr':
                        ajaxCallingAlwazIncr(calcSubStart,calcSubEnd,startDate,endDate);
                        return(loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd,graphName[graphname++]));
                    case 'segment':
                        return 'ajaxCallingSegment';
                    case 'answeredresponse':
                        return 'ajaxCallingSegmentRespDay';
                    case 'segmentresponse':
                        return 'ajaxCallingSegmentRespHours';
                    case 'lessthanDonut':
                        return 'ajaxCallinglessthanDonut';
                    case 'carrierPie':
                        return 'ajaxCallingCarrierPie';
                    default:
                        return 0;
                }
        }

這是我在每個函數之后編寫的代碼

 funcToCall=loadGraphInSeq(startDate,endDate,calcSubStart,calcSubEnd,graphName[graphname++]);
                     if (funcToCall!=0) {
                        var strParam = "startDate,endDate,calcSubStart,calcSubEnd";
                        var funcCall = funcToCall + "(" + strParam + ");";
                        eval(funcCall);
                    }