Wie lade ich JS-Skripte dynamisch und gleichzeitig-sicher?

Question

In meinem Projekt habe ich das ziemlich Standard Loadscript Methode JS-Skripte dynamisch zu laden, und wenn Sie fertig ist, wird der Rückruf gefeuert:

app.utilities.loadScript = function loadScript(url, callback) 
{ 

    if (app.scripts[url]===true) { 
    callback(); 
    } else { 

    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    script.onload = function() { 
     app.scripts[url] = true; 
     callback(); 
    } 
    // Fire the loading 
    head.appendChild(script); 
    } 
}; 

In meinem Projekt Situation, ich bin mit einem komponentenbasierten System arbeiten . Stellen Sie sich zur Veranschaulichung des Problems zwei Google Maps-Komponenten auf derselben Seite vor. Beides sind Instanzen einer Komponente. In ihrem Konstruktor bin Aufruf ich die Methode, wie so ...

constructor(selector) { 

    super(selector); 

    // API load status 
    this._api = false; 
    // load the maps API 
    app.utilities.loadScript('https://maps.googleapis.com/maps/api/js?v=3.exp&key=' + app.config.mapsKey, this.initMap.bind(this)); 

    } 

ich die Situation zu erwarten, dass, wenn zwei Instanzen einer Komponente das gleiche Skript geladen werden, sollte es nicht zweimal geladen werden. Aus diesem Grund können Sie sehen, wie ich innerhalb des loadScript-Helpers ein globales Array von bereits geladenen Skripten verwalte: app.scripts [url] = true;

Diese Strategie funktioniert jedoch nicht, da mehrere loadScript-Aufrufe sehr nahe nacheinander gestartet werden. Da der erste noch nicht fertig ist (in Bearbeitung), startet der zweite Anruf einen weiteren.

Ich erwäge sofort das Setzen eines "Lade" -Status auf das Skript in einem globalen Array, aber das würde mich immer noch fragen lassen, wie der zweite Anruf auf den ersten hören kann, der bereit ist, weil es einen solchen Auslöser benötigt Andernfalls wird der Rückruf zu früh ausgelöst.

Ich habe das Gefühl, dass ich das vielleicht überdenke?

Edit: einschließlich der Code, der diese löst, basierend auf einer Antwort von @Siam, mit einem kleinen Kniff hinzugefügt:

app.utilities.loadScriptEvent = function loadScript(url, eventName) 
{ 

    if (app.scripts[url] == 'loading') { 
     return true; 
    } 

    else { 
    app.scripts[url] = 'loading'; 

    var event = new CustomEvent(eventName); 

    // Adding the script tag to the head as suggested before 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    // Then bind the event to the callback function. 
    // There are several events for cross browser compatibility. 
    //script.onreadystatechange = callback; 

    script.onload = function() { 
     app.scripts[url] = true; 
     app.window.dispatchEvent(event); 
    } 
    // Fire the loading 
    head.appendChild(script); 
    } 
}; 

Beachten Sie, dass das Verfahren jetzt loadScriptEvent genannt wird, und dass der zweite Parameter ist ein Ereignisname, kein Rückruf. Die Idee ist, dass, obwohl zwei Komponenten fast gleichzeitig einen Anruf dazu machen könnten, beide auf dasselbe einzelne Ereignis hören. Das ist jedoch nicht genug, die zweite Anfrage muss noch gestoppt werden, wenn die erste bereits das Skript geladen hat. Das habe ich bei einem Ladezustand erkannt. Sie würden diese Methode so nennen:

app.utilities.loadScriptEvent('https://maps.googleapis.com/maps/api/js?v=3.exp&key=' + app.config.mapsKey, "gmloaded"); 
app.window.addEventListener('gmloaded',this.initMap.bind(this)); 

Dies funktioniert gut. Komponenteninstanzen kennen einander nicht, doch das Skript wird immer noch nur einmal asynchron geladen, und sofort können wir den Code ausführen.

Answer 1

Der folgende Code könnte Ihnen eine grobe Vorstellung, wie es getan werden könnte:

// using jQuery 

app.utilities.loadScript = function loadScript(url, callback) { 
    ... 
    script.onload = function(data) { 
     app.scripts[url] = true; 
     callback(); 
     ... 
     $(document).trigger('firstRqstCompleted', data); 
    } 
    ... 
} 

$(document).on('firstRqstCompleted', function(e, data) { 
    // do stuff with first request's data 
    // initiate second request 
});