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.

  • Protable Recursiva de Javascript
  • ¿Por qué los objects infinitos no rompen el flujo en javascript?
  • desbordamiento recursivo de la stack de JavaScript
  • ¿Función de order superior de funciones recursivas?
  • Recursión en el evento jQuery
  • Recursión sin punto en JS con ramda
  • Función recursiva para pasar por DOM desconocido
  • ¿Cómo return de una function de generador recursivo en JavaScript?
  • Recursive setInterval () se ejecuta continuamente
  • Javascript recursión settimeout
  • Explicar cómo funciona la recursión en un algorithm para determinar la profundidad del tree binary.
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.