Ich versuche, eine ultra einfache Lösung zu schreiben, um ein Bündel von JS-Dateien asynchron zu laden. Ich habe das folgende Skript unten so weit. Allerdings wird der Callback manchmal aufgerufen, wenn die Skripte nicht wirklich geladen sind, was zu einem Fehler "Variable nicht gefunden" führt. Wenn ich die Seite aktualisieren manchmal es funktioniert einfach, weil ich denke, die Dateien kommen direkt aus dem Cache und sind daher dort schneller als der Callback aufgerufen wird, es ist sehr seltsam?
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);
}
}Gibt es irgendwie zu testen, dass eine JS-Datei vollständig geladen wird, ohne etwas in die eigentliche JS-Datei selbst, weil ich möchte das gleiche Muster verwenden, um Bibliotheken außerhalb meiner Kontrolle (GMaps usw.) zu laden.
Aufrufender Code, direkt vor dem Tag.
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');
});Danke für jede Hilfe.
