¿Cómo cargo un número variable de scripts con jQuery.getScript() antes de ejecutar el código javascript?

Question

Necesito cargar una cantidad variable de archivos fuente de JavaScript antes de ejecutar el código de JavaScript que depende de ellos. A veces, es necesario cargar 1 script, otras veces 2. El método getScript() permite cargar un script: ¿cómo podría usarlo para cargar x número de scripts antes de ejecutar su código interno?

$.getScript("test.js", function(){ 
    // code to run after script is loaded 
});

lo que necesito:

$.getScript(new Array("1.js","2.js"), function(){ 
    // code to run after all scripts are loaded 
});

Gracias

Answer 1

le sugiero que busque en LABjs

Eso es exactamente lo que es su propósito.

Answer 2

He usado RequireJS bastante extensamente y es muy bueno. Sin embargo, esto podría funcionar para usted:

$.getScript("1.js", function(){ 
    $.getScript("2.js", function() { 
     // code to run after all scripts are loaded 
    }); 
}); 

Eso es un bloque bastante desagradable y poco del código de allí, la OMI, pero si es realmente sólo dos guiones como eso, es probablemente vale la pena. La lógica de lo anterior también se puede extraer a una función genérica, pero una vez que se avanza demasiado en esa ruta, probablemente sea más inteligente usar RequireJS o LABjs como JAAulde.

Answer 3

Si está utilizando jquery 1.5 puede usar la nueva sintaxis diferida.

$.when(
    $.getScript("1.js"), 
    $.getScript("2.js"), 
    $.getScript("3.js") 
).then(function(){ 
    alert("all loaded"); 
}); 

Solo pase los scripts que desea cargar.

Answer 4

Una forma es listar todas las secuencias de comandos en una matriz, realizar un seguimiento de cuántas secuencias de comandos se han cargado en comparación con la cantidad que desea cargar. Algo como esto:

var toLoad = ["1.js", "2.js", "3.js"], loaded = 0; 

var onLoaded = function() { 
    loaded++; 
    if (loaded == toLoad.length) { 
     console.log('All scripts loaded!'); 
    } else { 
     console.log('Not all scripts are loaded, waiting...'); 
    } 
} 

for (var i = 0, len = toLoad.length; i < len; i++) { 
    $.getScript(toLoad[i], onLoaded); 
}  

Answer 5

escribió esto hace un rato, pero prometo que no soy una planta. ;-) Además de LabJS y RequireJS, también hay Head.js que es muy fácil de usar y hace exactamente lo que quieres.

Answer 6

si tienes un par de matrices de como si tuviera ello:

 configFiles: [ 'config', 'routes']; 
    controllerFiles: [ 'authenticationController' ]; 

    var cnt = (configFiles).length-1; 

    for(file in configFiles){ 

     if(cnt == file){   

      $.getScript('/app/config/'+configFiles[file]+'.js', function(){      

       for(file in controllerFiles){     

         $.getScript('/app/controllers/'+controllerFiles[file]+'.js', function(){ 
         // run app now everything is loaded 
         });       

       } 

      }); 

     }else{ 

       $.getScript('/app/config/'+configFiles[file]+'.js'); 

     }  

    } 

Answer 7

Cargando varias secuencias de comandos por $ .getScript() uno tras otro y hacer cosas después de que todos los scripts se cargan

Working Fiddle. Compruebe la ventana de la consola para la salida

Podemos crear una función a la que pasemos un conjunto de rutas de archivos js, esta función hará un $.getScript() para el primer archivo js y en el método de éxito llamará a la misma función pasando el segundo índice de archivo js, ​​y este en éxito llamará a la misma función al pasar el índice del tercer archivo y así sucesivamente hasta que cargue el último archivo. Así que es básicamente una función de recursividad que dará una devolución de llamada cuando todos los archivos de la matriz ha sido loaded.The código final sería tan simple como

LoadAllScripts("yourArray",function(){ 
    alert("all scripts loaded!!"); 
}); 

así que el código completo sería algo así.

var LoadAllScripts = function (scriptArray, callback) { 
    SyncLoadScript({ scriptArray: scriptArray, index: 0}, function() { 
     callback(); 
    }); 
}; 

Y SyncLoadScript (core of the logic) parece

var SyncLoadScript = function (scriptConfig, callback) { 
    var $this = this; 
    var script = scriptConfig.scriptArray[scriptConfig.index]; 
    if (scriptConfig.scriptArray.length > scriptConfig.index) { 
     if (script.trim().length > 0) { 
      $.getScript(script, function() { 
       console.log(script); 
       SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback); 
      }).fail(function (jqXHR, textStatus, errorThrown) { 
       console.log(script + " failed while loading"); 
       debugger; 
       console.log("Error: "+errorThrown); 
       SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback); 
      });   
     } 
     else { 
      console.log("invalid script src!!");   
     } 
    } 
    else { 
     callback(); 
    } 
} 

entonces usted puede hacer una simple llamada a LoadAllScripts pasando array de ruta del archivo js. como abajo.

LoadAllScripts(["1.js","2.js","3.js","4.js"], function() { 
    console.log("All the scripts have been loaded."); 
    //do your stuff after all the scripts are loaded. 
}); 

Nota: he dado devoluciones de llamada vacías para ustedes para hacer ajustes y pasar alrededor de cualquier dato de elección. probably to hold all the failed scripts that you can passback to the main function and try to reload them again.