javascript - 使用appendChild()动态添加的脚本是顺序执行还是并行执行？

Question

我使用与此类似的代码动态地将脚本添加到页面:

var s = document.createElement('script');
s.src = 'script.js';
(document.head||document.documentElement).appendChild(s);

我添加的第一个脚本是 jQuery，之后捆绑了一些插件(全部在一个 JS 文件中)，然后第二个脚本使用 jQuery 以及在添加的第一个 JS 文件中创建的一些其他对象。

问题是第二个脚本中抛出错误，指出 jQuery，以及其他一些未定义的内容。

我假设以这种方式添加到 DOM 的脚本将按顺序解析/执行，但这些错误表明它们是并行执行的。

是哪一个？

Answer 1

基本上，我们会建议您使用库来处理此问题，但我不太喜欢库，因为它们经常提供比您需要的更多的东西，但这不一定是坏事。

要按顺序加载脚本，您需要在第一个脚本完成加载后绑定(bind)第二个脚本来加载。

var script1 = document.createElement('script');
script1.onload = function() {
    // script 1 has loaded
    var script2 = document.createElement('script');
    document.head.appendChild(script2);
    script2.src = "...";
}

document.head.appendChild(script1);
script1.src = "...";