Javascript 如何显示多个同步jQuery Ajax调用的进度？

我有一个CSHTML页面，我需要依次进行三个单独的Ajax调用，每个调用都必须等到前一个调用返回后才能运行。我想在网页上放一条信息，显示在那个特定时间正在处理哪些电话

但是，使用

async:false

不起作用，因为第二个调用将在第一个调用完成之前启动，而使用“async:true”不起作用，因为页面在所有三个调用完成之前不会更新，此时无需显示进度消息

这就是我的意思：

function doFullAnalysis() {
    doAnalysisStep(1);
    doAnalysisStep(2);
    doAnalysisStep(3);
    showTheResults();
}

function doAnalysisStep(runType) {
    $(button_div).html("Type " + runType + " processing...");
    $.ajax({
        type: "GET",
        url: '@Url.Action("AnalyzeDataRun", "DataHandler.svc")',
        data: {"RunType": runType},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
        },
        error: function (HelpRequest, ErrorCode, TheError) {
            resultString = "Error running the analysis:<br />" + TheError;
            $(item_div).html(resultString);
        },
        async: false;
    });
}

函数doFullAnalysis（）{
doAnalysisStep（1）；
doAnalysisStep（2）；
doAnalysisStep（3）；
显示结果（）；
}
函数doAnalysisStep（运行类型）{
$（button_div）.html（“Type”+runType+“processing…”）；
$.ajax({
键入：“获取”，
url:'@url.Action（“AnalyzeDataRun”、“DataHandler.svc”），
数据：{“运行类型”：运行类型}，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
},
错误：函数（帮助请求、错误代码、错误）{
结果字符串=“运行分析时出错：
”+错误；
$（item_div）.html（resultString）；
},
异步：false；
});
}

如前所述，doFullAnalysis将调用doAnalysisStep三次，但在完成对doAnalysisStep（）的三次调用和对showTheResults（）的调用之前，不会更新block button_div。但是，如果我删除“async:false”，那么第二个调用将在第一个调用完成之前完成，这是一件坏事，因为第二个调用取决于第一个调用的结果

我也尝试过：

var isRunning = false;

function doFullAnalysis() {
    doAnalysisStep(1);
    while (isRunning);
    doAnalysisStep(2);
    while (isRunning);
    doAnalysisStep(3);
    while (isRunning);
    showTheResults();
}

function doAnalysisStep(runType) {
    $(button_div).html("Type " + runType + " processing...");
    isRunning = true;
    $.ajax({
        type: "GET",
        url: '@Url.Action("AnalyzeDataRun", "DataHandler.svc")',
        data: {"RunType": runType},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
        },
        error: function (HelpRequest, ErrorCode, TheError) {
            resultString = "Error running the analysis:<br />" + TheError;
            $(item_div).html(resultString);
        },
        complete: function() {
            isRunning = false;
        }
    });
}

var isRunning=false；
函数doFullAnalysis（）{
doAnalysisStep（1）；
同时（正在运行）；
doAnalysisStep（2）；
同时（正在运行）；
doAnalysisStep（3）；
同时（正在运行）；
显示结果（）；
}
函数doAnalysisStep（运行类型）{
$（button_div）.html（“Type”+runType+“processing…”）；
isRunning=true；
$.ajax({
键入：“获取”，
url:'@url.Action（“AnalyzeDataRun”、“DataHandler.svc”），
数据：{“运行类型”：运行类型}，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
},
错误：函数（帮助请求、错误代码、错误）{
结果字符串=“运行分析时出错：
”+错误；
$（item_div）.html（resultString）；
},
完成：函数（）{
isRunning=false；
}
});
}

然而，这使它进入了一个看似无限的循环；我认为它在（isRunning）循环时处理第一个

太忙了，无法让整个块中的
isRunning=false
执行

有没有办法在同步请求之间更新页面？
祝您好运。
多个异步jQuery Ajax调用示例

<!....input data div elements.....>

<progress id="mainProgress" value="0" max="100" style="width:1034px;display:none"></progress>

<script>
function getNode(el){return document.getElementById(el);}

var bigData=[];
var dataIndex=0;

function processBigRequest(url,parameters){
    var text=bigData[dataIndex];
    text=encodeURL(text);   
    $.ajax({                
      url: url,
      type: "POST",
      crossDomain: true,
      dataType: "text",
      data: parameters+text,
      success: function( data ) {
        data=data.replace(/\n/g,"<br/>\n");
        getNode("mainDictReport").innerHTML+=data;
        //alert(dataIndex);
        dataIndex++;
        if(dataIndex<bigData.length){
            getNode("mainProgress").value=dataIndex*100/bigData.length+5;
            processBigRequest(url,parameters);
        }else{  
            getNode("startBtn").src="/work_file/_img/Start.jpg";
            getNode("mainProgress").value=0;
            getNode("mainProgress").style.display="none";
        }   

      }     
    });
}

function processRequest(url,parameters,textData,chinkSize){

    getNode("mainDictReport").innerHTML="";
    textData=encodeURL(textData);               

    if(textData.length>chinkSize){
        getNode("startBtn").src="/edit/images/Preloader_8.gif";
        alert("This file is big, please wait till full text will converted");
        getNode("mainProgress").style.display="block";
        getNode("mainProgress").value=3;
        bigData=[];
        var index=0;
        var nLine=encodeURL('\n');
        lines=textData.split(nLine);
        var text="";
        for(var i=0;i<lines.length;i++){
            text+=lines[i]+"\n";
            if(i>0&&i%chinkSize==0){
    bigData.push(text);
    text="";    
            }
        }
        bigData.push(text);
        text="";
        processBigRequest(url,parameters);
    }else{
       //handle direct request
    }

}
</script>


函数getNode（el）{return document.getElementById（el）；}
var bigData=[]；
var-dataIndex=0；
函数processBigRequest（url、参数）{
var text=bigData[dataIndex]；
text=编码URL（text）；
$.ajax（{
url:url，
类型：“POST”，
跨域：是的，
数据类型：“文本”，
数据：参数+文本，
成功：功能（数据）{
数据=数据。替换（/\n/g，“
\n”）；
getNode（“mainDictReport”）.innerHTML+=数据；
//警报（数据索引）；
dataIndex++；
如果（dataIndexchinkSize）{
getNode（“startBtn”）.src=“/edit/images/preload_8.gif”；
警报（“此文件很大，请等待全文转换”）；
getNode（“mainProgress”）.style.display=“block”；
getNode（“mainProgress”）。值=3；
bigData=[]；
var指数=0；
var nLine=encodeURL（'\n'）；
lines=textData.split（nLine）；
var text=“”；
对于（变量i=0；i0&&i%chinkSize==0）{
推送（文本）；
text=“”；
}
}
推送（文本）；
text=“”；
processBigRequest（url、参数）；
}否则{
//处理直接请求
}
}

这将逐个加载每个数据块并更新进度条。
处理此问题的标准方法（无需诉诸
async:false
，这几乎不是一个好主意）将在上一个请求的
success
回调中调用下一个请求。您还可以在那里更新进度条。不赞成使用
async:false
的原因是，它会在异步调用发生时阻止UI更新。因此，是的，不要这样做。有关如何对多个异步ajax调用进行排队的信息，请参阅。