0

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

我通过递归定义的 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() 的函数。（我检查了这个作品..）

4

3 回答 3

2

你如何使用这个 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）具有用于加载脚本的内置函数。

于 2011-08-08T22:06:26.540 回答
0

为什么不按正确的顺序将链接添加到您的 javascript，然后开始使用 jQuery 之类的 javascript 库？

于 2011-08-08T21:51:09.603 回答
0

您可以使用“检测加载完成”方法。看看这个演示的链接。

于 2011-08-08T21:52:50.193 回答