脚本执行期间的 .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 = ...，它也没有显示任何内容，然后当它完成时将显示“完成”文本。

每个函数都是 JQuery、Ajax 或 javascript，在我的 C# 控制器中来回执行一些操作，但我觉得文本更新仍应更新我的 innerHtml 文本，除非有一些我不知道的关于 innerHtml 的脚本内容/HTML...

另外：如果我在某处输入alert()，则会出现最新的文本更新。那么为什么只有警报中断或脚本执行结束才会更新/发布我的文本。我希望我的用户看到脚本的更新消息。

Answer 1

因为 ajax 是异步执行的。

如果您希望出现这样的文本，则需要在 ajax 函数中使用回调。

更新：因为您使用的是async: false，所以这种行为看起来很奇怪，但我不知道在您的情况下，javascript 和 jquery 如何准确处理 synchronous 调用。

一个修补程序建议是仍然向您的函数添加回调。 （注意：这是一个非常混乱的解决方法，应该只是帮助您修复问题。）

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.");
});
/* ... */