为什么我的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。

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

为什么？

Answer 1

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

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

然后就

$(document).ready(loadTemplate);

Answer 2

jQuery的加载功能使用ajax（异步）加载HTML文件。

异步操作不会中断执行流程，并且代码将继续以串行方式执行。 异步操作完成后，将调用该操作的回调。 您可以为异步操作注册回调。

在您的情况下，可以使用load提供的回调对加载的HTML执行操作：

$("#rcHeaderblock").load( "Header.xhtml", function() {
    var sessionValue = 'Welcome, Guest';
    $('#networkID p:nth-child(1)').text(sessionValue);
});