使用jQuery加載源文件時更新對象HTML

Question

我正在通過jQuery導入必要的文件，並且我想更新一些文本以顯示正在加載哪個文件，但似乎導入是在文本更新之前完成的，不管指定的順序如何。但是，控制檯將按計劃記錄更新，即使它在之後被稱爲的導入語句。我也嘗試了這種方式的文本更新調用，但它也沒有工作。

下面是一個代碼摘錄：

var jsFiles = new Array('some js files'); 
var cssFiles = new Array('some css files'); 

for(var i = 0; i < jsFiles.length; i++) { 
    $('#loadfile').text('imported js library `' + jsFiles[i]+'`'); 
    $('head').append('<script type="text/javascript" src="'+jsFiles[i]+'"></script>'); 
    console.log('imported js library `' + jsFiles[i]+'`'); 
} 

for(var i = 0; i < cssFiles.length; i++) { 
    $('#loadfile').text('imported css library `' + cssFiles[i]+'`'); 
    $('head').append('<link rel="stylesheet" media="screen" type="text/css" href="'+cssFiles[i]+'" />'); 
    console.log('imported css library `' + cssFiles[i]+'`'); 
} 

我已嘗試設置超時時間，並且我也試過，如果文本已經被更新的變量設置爲true，並檢查是否該變量是真實的導入文件之前， ，但這只是使文件無法導入。

我也嘗試使用document.getElementById調用更新文本，但沒有任何骰子。 JavaScript中有固有的東西來設置語句的優先級，還是我只是忽略了一些東西？

Answer 1

在大多數瀏覽器中，Javascript在GUI線程上運行。當您的腳本正在下載並讀取時，GUI將不會更新，直到您的腳本插入完成。 window.setTimeout將允許gui在下載/插入腳本之前進行更新。

for(var i = 0; i < jsFiles.length; i++) { 
    $('#loadfile').text('imported js library `' + jsFiles[i]+'`'); 
    window.setTimeout(function() { 
     $('head').append('<script type="text/javascript" src="'+jsFiles[i]+'"></script>'); 
    }, 10); 
    console.log('imported js library `' + jsFiles[i]+'`'); 
} 

來源：JavaScript seems to be executing code in wrong order