Обновить объект HTML при загрузке исходных файлов с помощью jQuery

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]+'`'); 
} 

Я попытался установить тайм-аут, и я также попытался установить переменную верно, если текст был обновлен и проверки, чтобы убедиться, что переменная была правда до импорта файлов , но это просто заставило файлы не импортировать.

Я также пробовал использовать вызов document.getElementById, чтобы обновить текст, но там тоже нет. Есть ли что-то, что присуще javascript, которое задает приоритет операторов или я просто что-то пропускаю?

Answer 1

В большинстве браузеров Javascript запускается в потоке графического интерфейса пользователя. Пока ваш скрипт загружается и читается, графический интерфейс не будет обновляться до завершения ввода скрипта. 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