Forma correcta de obtener varios guiones de forma asincrónica utilizando Jquery con devolución de llamada lista para documentos

Question

Estoy planeando obtener varios archivos JS de mi servidor de forma asíncrona mientras se carga la página. Soy consciente de la función de Jquery "getScript", pero esto solo tiene 1 script. ¿Hay alguna forma de especificar una devolución de llamada que se ejecutará cuando se haya obtenido un lote de scripts del servidor?

pensé en hacer algo como esto:

$.getScript(script1, function() { 
$.getScript(script2, function() { 
$.getScript(script3, function() { 
... 
... 
});});....}); 

Pero esto carga las secuencias de comandos en secuencia, y me gustaría las solicitudes que se realizan en paralelo.

Como una pregunta más general que sustituye a esta, ¿cuál es la mejor manera de cargar N recursos (CSS, imágenes, scripts, etc.) especificando asincrónicamente una única devolución de llamada que se ejecutará cuando se hayan cargado todos los recursos?

Actualización: Además de esto, necesito que la devolución de llamada se ejecute después de que el documento esté listo (señalado por el evento $ (documento) .ready). ¿Alguna forma de lograr esto?

Answer 1

es necesario llamar a getScript 3 veces seguidas, pasando una devolución de llamada que se incrementa un contador y llama a la devolución de llamada real si el contador es 3.

Se puede hacer una función de envoltura simple de hacer esto:

function getScripts(names, callback) { 
    var received = 0; 
    var realCallback = function() { 
     received++; 
     if (received === names.length) 
      $(callback); 
    }; 

    for (var i = 0; i < names.length; i++) 
     $.getScript(names[i], realCallback); 
} 

(Editado para llamar a la devolución de llamada cuando el documento esté listo)

se le puede llamar así:

getScripts([ "script1", "script2", "script3" ], function() { ... }); 

Answer 2

1. Inicializa una variable counter con la cantidad de recursos que se deben buscar.
2. Utilice la misma devolución de llamada para cada operación asincrónica.
3. Esta devolución de llamada debe disminuir counter y comprobar su valor. Una vez que llega a cero, debe invocar el código que se activará al finalizar.

Answer 3

var _couter=0; 
var _calledScripts=0; 
function _loadScripts(arrayOfScripts,_callBackFunction) 
{ 
    _counter=arrayOfScripts.length; 
    _calledScripts=0; 
    jQuery.each(arrayOfScripts,function(index,item){ 
      jQuery.getScript(item, function(){ 
       _calledScripts++; 
       if(_calledScripts==_couter) 
       { 
        _callBackFunction() 
       } 
      }); 
    }); 
} 

Answer 4

Uso async.js para hacer esto:

async.map(scripts, $.getScript, function() { 
    // called after all have completed... 
});