Javascript多個動態插入

Question

當我們爲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"]); 

謝謝！

-sorry for confusing you ..我添加了一個實際調用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的正確順序，然後開始使用JavaScript庫像jQuery？

Answer 3

您可以使用「detecting load completion」方法。 看看這個演示的鏈接。