Question

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

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

以下是我的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的load函数使用ajax（它是异步的）来加载HTML文件。

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

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

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

为什么我的JavaScript函数在我的jQuery load（）调用完成加载之前运行？

2 个答案: