Inserción dinámica múltiple de Javascript

Cuando hacemos inserción dinámica para javascript, a veces ordenamos asuntos. A veces resolvemos esto usando la propiedad onload; sin embargo, si hay muchos javascripts externos, y esos scripts se deben cargar en orden, ¿qué debemos hacer?

Resolví este problema mediante funciones onload definidas recursivamente; sin embargo, no estoy tan seguro de la eficiencia … ya que este es un script, creo que tiene pereza eval … ¿Alguna ayuda?

//recursively create external javascript loading chain //cautiously add url list according to the loading order //this function takes a list of urls of external javascript function loadScript(url) { if( url.length == 0) { //final function to execute return FUNCTION; } var f = function(){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url.pop(); //recursion script.onload = loadScript(url) ; document.getElementsByTagName("head")[0].appendChild(script); } return f; } function loadScripts(urls) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = urls.pop(); script.onload = loadScript(urls) ; document.getElementsByTagName("head")[0];.appendChild(script); } loadScripts(["aaa.js","bbb.js","ccc.js"]); 

¡Gracias!

– lo siento por confundirte … Agregué una función que en realidad llama a loadScript (). (He comprobado que esto funciona …)

3 Solutions collect form web for “Inserción dinámica múltiple de Javascript”

El contexto de cómo usas esta función de loadScript se me escapa aquí y parece mucho más confuso de lo que probablemente deba ser.

Si desea cargar los scripts en orden, ¿por qué no hace una lista de ellos en el orden en que desea cargarlos? Cargue el primero. Cuando finalice la carga, actualice su lista para eliminar la que acaba de cargar y cargue la siguiente, etc.

Aquí hay algo de código que podría hacer eso y debería funcionar con cualquiera de los mecanismos de detección de carga de scripts que utilizan los navegadores y esperará hasta que se llame a la función onload (o la notificación de cambio de readystatech) hasta que se cargue el siguiente script:

 function loadScriptsSequential(scriptsToLoad) { function loadNextScript() { var done = false; var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.onreadystatechange = function () { if (this.readyState == 'complete' || this.readyState == 'loaded') { scriptLoaded(); } } script.onload = scriptLoaded; script.src = scriptsToLoad.shift(); // grab next script off front of array head.appendChild(script); function scriptLoaded() { // check done variable to make sure we aren't getting notified more than once on the same script if (!done) { script.onreadystatechange = script.onload = null; // kill memory leak in IE done = true; if (scriptsToLoad.length != 0) { loadNextScript(); } } } } loadNextScript(); } var scripts = [a,b,c,d,e,f]; // scripts to load in sequential order loadScriptsSequential(scripts); 

Como han mencionado otros, hay marcos muy útiles (como jQuery) que tienen funciones integradas para cargar scripts.

¿Por qué no solo agrega los enlaces a su javascript en el orden correcto y luego comienza a usar una biblioteca de javascript como jQuery?

Hay un método de ” detección de finalización de carga ” que podría utilizar. Echa un vistazo a este enlace que lo demuestra.

  • Recursión con ng-repeat en Angular
  • Método literal del object JavaScript: llamada recursiva
  • Recursión en el evento jQuery
  • Anima el canvas de Javascript mientras estás en el cálculo recursivo
  • Compruebe si hay caracteres repetidos en una cadena de Javascript
  • javascript recursivo con parameters para disminuir
  • ANN: Retropropagación recursiva
  • Fonaonacci de JavaScript mediante recursión
  • ¿Cuáles son los límites de la recursión?
  • Comprender las promises en node.js para la function recursiva
  • ¿Cómo escribo una function de flecha en ES6 recursivamente?
  • Encuentra un objeto en una matriz de objetos profundamente nesteds recursivamente
  • ¿Cómo hago este ciclo todos los niños recursivamente?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.