如何轮询 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);

当我尝试将其放入函数中时，模块总是 "undefined" 并且永远不会告诉我它已加载。很确定我现在没有传递 namespace/module 名称来检查它。

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();
});

Answer 2

您可能想要使用元素 load 事件

newScript.onload=function(){
//YOUR CODE HERE
}

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

How to poll a module loaded dynamically in Javascript

javascript

loading

module-pattern