动态加载多个 JS 文件并在所有文件准备就绪时触发回调

我有几个 JS 和 CSS 文件，需要使用 JavaScript 动态附加到 DOM。所描述的方法here https://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/对于 1 个文件来说效果很好。但是我有几个，它们应该按一定的顺序附加/加载：

var resources = {
  "jquery" : "jquery.js",
  "jqueryui" : "jquery_ui.js",
  "customScript" : "script.js"
}

如果这很重要 - 资源可以位于数组中而不是对象中。

我认为应该做的是在前一个资源的回调中加载每个下一个资源。最后一个资源的回调应该调用另一个函数，在我的例子中，该函数将渲染 HTML。但是我不确定如何使用上面链接中给出的代码来组织它。另一个重要的方面是这应该使用纯 JavaScript 来完成。

有什么线索吗？

Thanks!

如果您关心资源的加载顺序，我建议您创建资源数组而不是对象。我希望这个解决方案能够解决您的问题。

var urls = ['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js',
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.slim.js'
];

var i = 0;

var recursiveCallback = function() {
  if (++i < urls.length) {
    loadScript(urls[i], recursiveCallback)
  } else {
    alert('Loading Success !');
  }
}

loadScript(urls[0], recursiveCallback);

function loadScript(url, callback) {

  var script = document.createElement("script")
  script.type = "text/javascript";

  if (script.readyState) { //IE
    script.onreadystatechange = function() {
      if (script.readyState == "loaded" ||
        script.readyState == "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

工作小提琴：https://jsfiddle.net/nikdtu/6uj0t0hp/ https://jsfiddle.net/nikdtu/6uj0t0hp/