当我有一组脚本时，如何等到脚本加载完毕？

Question

我有一个这样的脚本对象数组：

_externalLibraries = [{name: 'knockout', url: '...'}, { name: 'knockoutValidation', url: '....'}];

然后我尝试写以下内容：

loadLibraries: function() {
  if (_externalLibraries.length === 0) {
    return;
  }

  _externalLibraries.forEach(function(lib){
    // Check if the libraries has been registered as "loaded."
    var librarysAlreadyLoaded = _loadedLibraries.filter(function(libAlreadyLoaded){
      return libAlreadyLoaded.name === lib.name;
    });

    // If it hasn't been loaded. Load it. This allows for mul;tiple widgets to be on the page.
    // Or this file (for what ever reason) to be called multiple times.
    console.log(librarysAlreadyLoaded);
    if (librarysAlreadyLoaded.length === 0) {
      $.getScript(lib.url, function(){
        _loadedLibraries.push({name: lib.name});
      });
    }
  });
},

基本上我要做的是说在这个数组中加载库，如果它还没有被加载的话。如果还没有，则加载它并将名称添加到“加载的库”数组中。

问题是“ko 未定义”，至少对于淘汰赛和淘汰赛验证而言。页面加载后，我可以在控制台中输入ko 并查看它实际上已加载。

我可以更改或添加到代码中以使其显示“好的，我需要等到加载此数组中的每个脚本”。然后做我想做的其他事情。

Answer 1

您可以使用$.when()，Function.prototype.apply()

var _externalLibraries = [{
  name: "knockout",
  url: "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"
}, {
  name: "knockoutValidation",
  url: "https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"
}];

var loadedLibraries = [];

$.when.apply($, $.map(_externalLibraries, function(lib) {
  return $.getScript(lib.url, function() {
    loadedLibraries.push(lib.name)
  })
}))
.then(function() {
  console.log(loadedLibraries, ko, ko.validation)
}, function err(jqxhr, textStatus, errorThrown) {
    console.log(textStatus, errorThrown)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>