Как заставить нормально работать динамически подключенный js код?

Question

[Roweb]

Динамически подключаю js скрипты с помощью appendChild.

var jq = document.createElement('script');
		jqt.src = "js/jquery-3.3.1.min.js";
		document.querySelector('body').appendChild(jq);

		var script = document.createElement('script');
		script.src = "js/scripts.js";
		document.querySelector('body').appendChild(script);

Сначала jquery, затем пользовательский файл. Код по видимому не исполняется в порядке подключения. Сначала исполняется scripts, потом jquery. Как это исправить?

Answer 1

[dollar]

var jq = document.createElement('script');
jq.src = "js/jquery-3.3.1.min.js";
document.querySelector('body').appendChild(jq);

jq.onload = e => {
    var script = document.createElement('script');
    script.src = "js/scripts.js";
    document.querySelector('body').appendChild(script);
};

Comments

[Roweb]

Почему при статическом подключении тогда исполнение по порядку идет?

[dollar]

Roweb, Потому что оно статическое, очевидно)
Статическое выполнение означает не только порядок, а вообще блокировку загрузки страницы, пока скрипт не загрузится и не выполнится.

[nandeaitsurawapinku]

Roweb, они выполняются асинхронно, Кто первый загрузился тот и выполнился. В случае со статическим подключением браузер будет останавливаться чтобы исполнить. Добавив async можно добиться такого же эфекта (Внешние скрипты, порядок исполнения)

Answer 2

[nandeaitsurawapinku]

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

fetch('js/jquery-3.3.1.min.js')
.then(function(response) {
   // создать тег script и положить в него response
}).then(function(myBlob) {
   // после чего выполнить 
    var script = document.createElement('script');
    script.src = "js/scripts.js";
    document.querySelector('body').appendChild(script);
});

или же

var jq = document.createElement('script');
    jqt.src = "js/jquery-3.3.1.min.js";
    document.querySelector('body').appendChild(jq);

var interval = setInterval(function() {
   if(window.jquery) {
     clearInterval(interval)
      var script = document.createElement('script');
      script.src = "js/scripts.js";
      document.querySelector('body').appendChild(script);
  }
}, 100)

первое решение мне нравится больше

p.s
возможно ещё defer сработает если добавить к тегам

Answer 3

[alex-1917]

Слить два файла в один что не позволяет? Или кто?

Comments

[Roweb]

Понимание того, что это бесполезно