Wie kann ich die Ausführung von JS-Code verzögern, bis ALLE asynchronen JS-Dateien heruntergeladen sind?

Question

UPDATE:

habe ich den folgenden Code:

<script type="text/javascript"> 
function addScript(url) { 
    var script = document.createElement('script'); 
    script.src = url; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 
addScript('http://google.com/google-maps.js'); 
addScript('http://jquery.com/jquery.js'); 

... 

// run code below this point once both google-maps.js & jquery.js has been downloaded and excuted 

</script> 

Wie kann ich Code von der Ausführung verhindern, bis alle JS heruntergeladen wurden erforderlich und ausgeführt? In meinem obigen Beispiel waren diese Dateien google-maps.js und jquery.js.

Answer 1

Sie können das onload Ereignis des Script-Element für die meisten Browser und eine Callback-Argument verwenden:

Edit: Sie können wirklich nicht die Ausführung des Codes stoppen, wenn Sie Skripts auf diese Weise laden (Und synchrone Ajax-Anfragen zu machen ist meistens eine schlechte Idee).

Aber Sie können Kette Rückrufe, wenn Sie also einen Code haben, der auf beide abhängt, Two.js und Three.js, können Sie Kette die Lade Aktionen, zum Beispiel:

loadScript('http://example.com/Two.js', function() { 
    // Two.js is already loaded here, get Three.js... 
    loadScript('http://example.com/Three.js', function() { 
    // Both, Two.js and Three.js loaded... 
    // you can place dependent code here... 
    }); 
}); 

Umsetzung:

function loadScript(url, callback) { 
    var head = document.getElementsByTagName("head")[0], 
     script = document.createElement("script"), 
     done = false; 

    script.src = url; 

    // Attach event handlers for all browsers 
    script.onload = script.onreadystatechange = function(){ 
    if (!done && (!this.readyState || // IE stuff... 
     this.readyState == "loaded" || this.readyState == "complete")) { 
     done = true; 
     callback(); // execute callback function 

     // Prevent memory leaks in IE 
     script.onload = script.onreadystatechange = null; 
     head.removeChild(script); 
    } 
    }; 
    head.appendChild(script); 
} 

Für IE, das onreadystatechange Ereignis hat gebunden sein.

Answer 2

Ich lese gerade CMS's answer, und entschied, dass von seiner "meisten Browser" -Kommentar, könnte ich einen Riss bei der Arbeit für diejenigen, die diese Funktionalität nicht nativ haben.

Grundsätzlich ist es ein Intervall, das für eine Variable abfragt.

var poll = window.setInterval(function() { 

    if (typeof myVar !== 'undefined') { 
     clearInterval(poll); 
     doSomething(); 
    }; 

}, 100);