javascript - 如何轮询在 Javascript 中动态加载的模块

Question

我有一个模块，一旦页面滚动到某个点，我就会在 Javascript 中按以下方式加载:

newScript = document.createElement('script');
newScript.setAttribute('src','scripts/GalleryLoader-min.js');
document.body.appendChild(newScript);

这很好用，但我想在加载后调用 init() 函数。以下是有效的，但似乎我应该能够将其放入自己的函数中并重用:

var currentChance = 500;
var refreshIntervalId = setInterval(function(){
    currentChance--;

    console.log("Waited");
    if (typeof NS.GalleryLoader !== 'undefined') {
        console.log("Loaded: "+NS.GalleryLoader);
        NS.GalleryLoader.init();
        clearInterval(refreshIntervalId);
    }
    else if (currentChance > 0) {
        console.log("Trying again: "+NS.GalleryLoader);
    }
    else {
        console.log("Unable to Load "+NS.GalleryLoader);
        clearInterval(refreshIntervalId);
    }   
}, 10);

当我试图将它放入一个函数中时，模块总是“未定义”并且永远不会告诉我它已加载。很确定我没有为了检查它而直接传递命名空间/模块名称。

Answer 1

您可以使用 HTMLScriptElement 的 onload 事件.

newScript.addEventListener('load', funcion() {
  NS.GalleryLoader.init();
});

您甚至可以像这样创建一个通用函数:

function loadScript(path, callback) {
  var s = document.createElement('script');
  if (callback)
    s.addEventListener('load', callback);
  s.async = true;
  s.src = path;
  document.querySelector('head').appendChild(s);
}

然后使用它:

loadScript('scripts/GalleryLoader-min.js', function() {
  NS.GalleryLoader.init();
});