.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!"); 

т.е.

Пример функции (только Аякса, что происходит в суб-функций, фактические вызовы функций и обновления текста в простой функции JS, не АЯКС на что ...)

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 = ..., который также ничего не показывает, когда его результат покажет текст «Законченный».

Каждая функция представляет собой JQuery, Ajax или javascript с несколькими назад и вперед от моего контроллера C#, но я чувствую, что текстовые обновления все равно должны обновлять мой текст innerHtml, если нет какой-либо скриптовой вещи, о которой я не знаю innerHtml/Html ...

ТАКЖЕ: Если я брошу в alert() где-нибудь, появится самое последнее текстовое обновление. Так почему же только прерывание предупреждения или завершение выполнения скрипта будет обновлять/публиковать мой текст. Я хочу, чтобы мои пользователи увидели обновленные сообщения о работе со сценарием.

Answer 1

потому что ajax выполняется синхронно.

Если вы хотите, чтобы текст выглядел так, вам нужно использовать обратные вызовы в своих функциях ajax.

обновление:, так как вы используете async: false это поведение кажется очень странным, но я не знаю, как яваскрипт и JQuery точно обрабатывать synchronous звонки в вашем случае.

одним предложением для исправления было бы добавление обратных вызовов к вашим функциям. (примечание:. это очень грязный обходной путь и должно только помочь вам 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."); 
}); 
/* ... */