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

Question

我有一个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 3次，但是直到对doAnalysisStep（）和showTheResults（）的所有三个调用都完成后，才会更新block_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;
        }
    });
}

但是，这使它陷入了无限循环的境地。 我认为处理第一个while (isRunning)循环太忙了while (isRunning)无法在完整的块中执行isRunning = false 。

有没有办法处理同步请求之间的页面更新？

Answer 1

美好的一天。 多个异步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>

这将一一加载每个数据块并更新进度条。