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

唯一出现的是＆＃34;完成＆＃34; （在脚本完成后），为什么还会出现其他任何内容？执行大约需要10秒钟，因此应该在innerHtml / Html中弹出其他更新。我也试过使用document.getElementById("updates").innerHTML = ...，当它的完成显示＆＃34;完成＆＃34;时，它也没有显示任何内容。文本。

每个函数都是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();
        }
    });
}

然后在你的函数调用中添加匿名函数作为callback-parameter。在这些函数的主体中，总是为下一个要执行的函数添加.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.");
});
/* ... */

脚本执行期间.innerHtml文本更新

1 个答案: