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方法）。

使用您的代码我已经更新了示例。 asynch和synch函数都应该返回一个promise。 asynch（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);
                    }

如何顺序调用ajax函数

2 个答案: