為什么我的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);
});