Javascript多个动态插入 [英] Javascript multiple Dynamic Insertion

问题描述

当我们为JavaScript进行动态插入时，有时候订购很重要。我们有时通过使用onload属性来解决这个问题然而，如果有很多外部javascript，而且这些脚本必须按顺序加载，那我们该怎么办？

When we do dynamic insertion for javascript, sometimes order matters. We sometimes solve this by using onload property; however, if there are many external javascripts, and those scripts has to be loaded in order, then what should we do?

我通过递归定义的onload函数解决了这个问题;然而不太确定效率...因为这是一个脚本，我认为它做懒惰eval ....任何帮助？

I solved this problem by recursively defined onload functions; however not so sure about efficiency... since this is a script, I think it does lazy eval.... Any help?

//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"]);

谢谢！

-sorry让你感到困惑..我添加了一个实际调用loadScript（）的函数。 （我检查了这个工作..）

-sorry for confusing you.. I added a function that actually calls loadScript(). (I checked this works.. )

推荐答案

你使用这个loadScript函数的上下文可以在这里转义，看起来更多如果您想按顺序加载脚本，为什么不按照要加载的顺序列出它们的列表呢？

The context for how you use this loadScript function escapes me here and looks a lot more confusing than it probably needs to be.

他们，加载第一个。当它完成加载，更新你的列表删除刚刚加载和加载下一个，等等...

If you want to load scripts in order, why don't you just make a list of them in the order you want to load them, load the first one. When it completes loading, update your list to remove the one that just loaded and load the next one, etc...

这是一些代码，可以做到这一点，应该工作使用浏览器使用的任何一种脚本加载检测机制，并等待加载下一个脚本之前调用onload函数（或readystatechange notification）：

Here's some code that could do that and should work with either of the script load detection mechanisms that browsers use and will wait until the onload function is called (or readystatechange notification) until loading the next 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);

正如其他人所说，有非常有用的框架（如jQuery），内置函数加载脚本。

As others have mentioned, there are very helpful frameworks (like jQuery) that have built-in functions for loading scripts.

这篇关于Javascript多个动态插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！