小编典典

通过回调异步加载JavaScript文件

ajax

我正在尝试编写一个超简单的解决方案以异步加载一堆JS文件。到目前为止,我下面有以下脚本。但是,当未实际加载脚本时,有时会调用回调,这会导致未找到变量错误。如果我刷新页面有时会起作用,因为我猜这些文件是直接从缓存中提取的,因此比调用回调要快,这很奇怪吗?

var Loader = function () {

}
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

无论如何,有没有方法可以测试JS文件是否已完全加载,而无需在实际的JS文件本身中放入任何东西,因为我想使用相同的模式从我的控件(GMaps等)中加载库。

在代码之前调用代码。

var l = new Loader();
l.require([
    "ext2.js",
    "ext1.js"], 
    function() {
        var config = new MSW.Config();
        Refraction.Application().run(MSW.ViewMapper, config);
        console.log('All Scripts Loaded');
    });

谢谢你的帮助。


阅读 277

收藏
2020-07-26

共1个答案

小编典典

据我所知,您的代码没有错,这只是Chrome中的一个错误(它也使用window.onload做到了。)

我将其添加到“加载”函数中触发的函数中。如果该变量存在,请执行JS代码,但如果不存在,请使用setTimeout在500毫秒左右再次进行检查。

2020-07-26