¿Cómo puedo retrasar la ejecución de algunos códigos JS hasta que descargue TODOS mis archivos JS asíncronos?

Question

ACTUALIZACIÓN:

tengo el siguiente código:

<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> 

¿Cómo puedo evitar que el código se ejecute hasta que todos los muestreos requeridos JS se han descargado y ejecutado? En mi ejemplo anterior, esos archivos requeridos son google-maps.js y jquery.js.

Answer 1

Usted puede utilizar el evento onload del elemento de secuencia de comandos para la mayoría de los navegadores, y utilizar un argumento de devolución de llamada:

Editar: Realmente no se puede detener la ejecución del código cuando se carga guiones de esta manera (y hacer solicitudes síncronas de Ajax es una mala idea la mayoría de las veces).

Pero se puede devoluciones de llamada de la cadena, por lo que si usted tiene un código que depende de ambos, Two.js y Three.js, puede cadena las acciones de carga, por ejemplo:

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... 
    }); 
}); 

Implementación:

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); 
} 

para IE, el evento onreadystatechange tiene que obligarse.

Answer 2

Acabo de leer CMS's answer, y decidí que a partir de su comentario de "la mayoría de los navegadores", podría tener una grieta para hacer que funcione para aquellos que no tienen esta funcionalidad de forma nativa.

Básicamente, es un intervalo que sondea para una variable.

var poll = window.setInterval(function() { 

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

}, 100);