使用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