javascript - 为什么我的 JavaScript 函数在我的 jQuery load() 调用完成加载之前运行？

Question

我有一个 JavaScript 文件以及 HomePage.xhtml 和 Header.xhtml。

Header.xhtml 使用 JavaScript 包含在 HomePage.xhtml 中。

这是我的 JavaScript 文件的示例代码:

$(document).ready(function() {

    loadTemplate();
    loadUserContext();
});

function loadTemplate() {

    $(function() {
       $("#rcHeaderblock").load("Header.xhtml");
    });
}

function loadUserContext(){

    var sessionValue = 'Welcome, Guest';
    $('#networkID p:nth-child(1)').text(sessionValue);
}

networkID 是 Header.xhtml 中要动态替换的 div 标签的 ID。

但通过执行几个调试步骤，我发现 loadUserContext 在 Header.xhtml 实际加载到我的 HomePage.xhtml 之前被调用。

为什么？

Answer 1

load是异步的。但是，它为您描述的情况提供了回调机制。您可能想要做的是:

$("#rcHeaderblock").load("Header.xhtml", loadUserContext);

然后就是

$(document).ready(loadTemplate);