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

标签 javascript loading module-pattern

我有一个模块,一旦页面滚动到某个点,我就会在 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);

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

最佳答案

您可以使用 HTMLScriptElementonload 事件.

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

关于javascript - 如何轮询在 Javascript 中动态加载的模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32725961/

相关文章:

javascript - 如何使用 Jquery/Javascript 从选择下拉列表中拆分文本以用于乘法

javascript - 单击时动态创建 Vue 组件

javascript - 将 dojo Autocompleter 连接到 javascript 函数

domain-driven-design - 聚合根引用其他聚合根

javascript - 移动 HTML 输入文本框在提交时隐藏软键盘

php - PHP 和 HTML 文件加载时间的差异?

jquery - 我如何使用 jquery 显示和隐藏这个加载栏

javascript - 使用模块模式的变体发出附加 javascript 事件的问题

javascript - 在模块中重新声明变量还是引用单独的模块更好?

javascript - Javascript Module Pattern 可以用于单例,也可以用于实例化多次的对象吗?