.innerHtml 텍스트가 스크립트 실행 중 업데이트 됨

Question

javascript/jquery/ajax 실행 중에 텍스트 업데이트를 가져올 수없는 이유에 대해 혼란 스럽습니다.

다음 코드가 있습니다.

$("#updates").html("Collecting your team names."); 
YourTeamFirst(YourTeam, TeamValue); 

$("#updates").html("Collecting their team names."); 
TheirTeamNext(TheirTeam, TeamValue); 

$("#updates").html("Gathering ID's."); 
setNames(TeamValue); 

$("#updates").html("Setting Details."); 
setChampRatios(TeamValue); 

$("#updates").html("Setting Ratios."); 
setChampKDRS(TeamValue); 

$("#updates").html("Finished!"); 

즉

예 함수 (발생만을 AJAX 함수 호출 및 텍스트 업데이트 실제는 일반 JS 함수 해당 없음 AJAX에, 서브 함수에 ...)

function TheirTeamNext(TheirTeam, TeamValue) { 
     $.ajax({ 
      url: "/PlayerLookUp/TheirRankedData", 
      type: "POST", 
      data: "IDList=" + T[i], 
      dataType: "json", 
      async: false, 
      success: function (resp) { 
        //just boring logic 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       if (XMLHttpRequest.status == 0) { 
         alert("Issue with reaching Riot API server. Pleast contact an Admin."); 
       } 
      } 
     });  
} 

유일한 것은 "완료되었습니다"(스크립트가 완료된 후) 왜 다른 것이 전혀 나타나지 않는 것입니까? 실행은 약 10 초가 걸리므로 다른 업데이트가 innerHtml/Html에 나타나야합니다. 나는 또한 document.getElementById("updates").innerHTML = ...을 사용하여 시도해 보았습니다. 또한 완료된 텍스트가 "Finished"텍스트로 표시 될 때 아무 것도 보여주지 않습니다.

각 함수는 JQuery, Ajax 또는 javascript이고 C# 컨트롤러에서 몇 개 앞뒤로 나뉘어 있습니다. 그러나 내가 인식하지 못하는 스크립트가 없으면 텍스트 업데이트가 여전히 innerHtml 텍스트를 업데이트해야합니다. innerHtml/Html ... 어스에서 가장 최근 텍스트 업데이트가 표시됩니다. alert() 그렇다면 경고 중단이나 스크립트 실행 종료로 인해 내 텍스트가 업데이트/게시됩니다. 내 사용자가 스크립트 사용시 업데이트 된 메시지를 보길 바랍니다.

Answer 1

왜냐하면 ajax가 비동기 적으로 실행되기 때문입니다.

텍스트가 표시되도록하려면 아약스 함수에서 콜백을 사용해야합니다.

업데이트 : 당신이 async: false이 동작을 사용하고 있기 때문에 정말 이상한 것 같다,하지만 난 정확히 경우 synchronous 통화를 처리하는 방법을 자바 스크립트와 JQuery와 모른다.

하나의 핫픽스 제안은 여전히 ​​함수에 콜백을 추가하는 것입니다. (참고 :. 이 매우 지저분 해결하고 당신이 문제를 hotfixing 도움이) 함수 호출에서 다음

function YourTeamFirst(YourTeam, TeamValue, callback) { 
    /* ... */ 
    $.ajax({ 
     /* ... */ 
     success: function (resp) { 
      /* ... */ 
      callback(); 
     } 
    }); 
} 

는 콜백 매개 변수로 익명 함수를 추가합니다. 이 함수의 본문에 다음 함수가 실행될 때 항상 .html()을 추가하십시오.

$("#updates").html("Collecting your team names."); 

YourTeamFirst(YourTeam, TeamValue, function() { 
    $("#updates").html("Collecting their team names."); 
}); 

TheirTeamNext(TheirTeam, TeamValue, function() { 
    $("#updates").html("Gathering ID's."); 
}); 
/* ... */