我正在尝试编写一个超简单的解决方案以异步加载一堆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'); });
谢谢你的帮助。
据我所知,您的代码没有错,这只是Chrome中的一个错误(它也使用window.onload做到了。)
我将其添加到“加载”函数中触发的函数中。如果该变量存在,请执行JS代码,但如果不存在,请使用setTimeout在500毫秒左右再次进行检查。