Параллельная загрузка скриптов с последовательным выполнением?

Question

[tamtakoe]

Добавляю скрипты в index.html

function addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
}

scriptsArr.forEach(addScript);

Проблема в том, что они выполняются в хаотичном порядке. Как сделать, чтобы они выполнялись последовательно (Без использования jQuery и других тяжеловесных библиотек)?

Answer 1

[Alexey Bykov]

Если действительно хочется решения на чистом JS без использования каких-либо библиотек, то можно скачивать скрипты при помощи XMLHttpRequest и вставлять в DOM тело скрипта.
Пример::

function fetch(url,callback){
    var req = new XMLHttpRequest();
    req.open("GET",url);
    req.onload = function(){
      callback(req.responseText);
   }
   req.send();
}

function insertScript(scriptBody){
   var script = document.createElement('script');
   script.innerText = scriptBody;
   document.body.appendChild(script);
}

var scripts = ["/first.js","second.js"];
var bodies = new Array(scripts.length);

scripts.forEach(function(script,index){
    fetch(script,function(body){
        bodies[index]=body;
        if(bodies.every(function(el){return el})) {
             bodies.forEach(insertScript);
        }
    });
})

Comments

[Artur Aralin]

Получается просто синхронно их загружать?

[Alexey Bykov]

В моём примере загрузка (скачивание) идёт параллельно , а исполнение скриптов - последовательно.

Answer 2

[Ivan Zmerzlyi]

Есть очень хорошая библиотека, он не большая (2kb), и может отслеживать загрузку как js так и css файлов
Fallback JS.

Писал собственное решение для данной задачи, но потом нашел данную библиотеку и она реально решила много проблем с порядком выполнения кода.

Comments

[tamtakoe]

Видимо да, придется ее заюзать. Хотя, в проекте есть requireJS, может быть с ним можно? Только сделать так, чтобы он два раза выполнился. Для загрузки всех скриптов и для выполнения модулей самого приложения (два разных конфига будет)

[Ivan Zmerzlyi]

Если в проекте есть requireJS, то не нужно тогда никаких лишних библиотек. Он сам является загрузчиком.

Answer 3

[Сергей Щучкин]

Вот такая штука у меня в подвале, помимо синхронной загрузки скриптов из массива scripts, после загрузки вызываются функции из массива scripts_cb

var scripts = ['/style/jquery-1.7.1.min.js','/style/jquery.boxy.min.js','/style/smspilot.js?v2.3'];
var scripts_head = document.getElementsByTagName('head')[0] || document.documentElement;

var scripts_cb = [];
function scripts_ready( callback ) {
	scripts_cb[ scripts_cb.length ] = callback;
}
function scripts_loaded() {
	
	scripts.splice(0,1);
	
	if (scripts.length > 0) {
		scripts_load();
	} else {
		for( var i = 0; i<scripts_cb.length; i++) {
			scripts_cb[i]();
		}
	}
}
function scripts_load() {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.async = true;
	script.src = scripts[0];
	script.onload = scripts_loaded;
//	script.onerror = onerror;
	script.onreadystatechange = function () {
		var state = this.readyState;
		if (state === 'loaded' || state === 'complete') {
			script.onreadystatechange = null;
			scripts_loaded();
		}
	};
    scripts_head.insertBefore(script, scripts_head.firstChild);
}
window.setTimeout('scripts_load()', 50);