Question

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

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

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

谢谢！

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

Answer 1

你如何使用这个loadScript函数的上下文在这里让我感到惊讶，看起来比它可能需要的更令人困惑。

如果要按顺序加载脚本，为什么不按照要加载它们的顺序列出它们，加载第一个。完成加载后，更新列表以删除刚刚加载的列表，然后加载下一个等等...

以下是一些可以执行此操作的代码，并且应该与浏览器使用的任一脚本加载检测机制一起使用，并且会等到调用onload函数（或readystatechange通知），直到加载下一个脚本：

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），它们具有用于加载脚本的内置函数。

Answer 2

为什么不按正确的顺序添加指向你的javascript的链接，然后开始使用像jQuery这样的javascript库？

Answer 3

您可以使用“detecting load completion”方法。看一下该演示的链接。

Javascript多次动态插入

3 个答案: