使用連續回調自動加載JavaScript文件

Question

我有以下javascript列表，這個列表中的每個項目都有一個腳本文件url和一個回調函數，我想要做的就是迭代這個列表，加載每個腳本，然後執行回調函數，並不移動到下一個項目，除非當前的回調執行完畢..

var data = { 
    scripts: [ 
     { 
      file : 'some-script.js', 
      callback: function() { 
       // do some code here 
      }, 
     }, 
     { 
      file : 'another-script.js', 
      callback: function() { 
       // do some code here 
      }, 
     }, 
     ... 
    ] 
}; 

我怎麼能做到這一點自動，如果可能的話？

Answer 1

（我假設您使用JSONP來加載您的外部腳本）您將面臨的問題是，這些腳本不會同時加載所有腳本。

下面是一些代碼，一旦關聯的腳本被加載就會調用你的回調函數。

function include_js(url, callback) { // http://www.nczonline.net 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 

     if (script.readyState) { //IE 
      script.onreadystatechange = function(){ 
       if (script.readyState == "loaded" || script.readyState == "complete"){ 
        script.onreadystatechange = null; 
        callback(); 
       } 
      }; 
     } else { //Others 
      script.onload = function(){ 
       callback(); 
      }; 
     } 
     script.src = url; 
     document.getElementsByTagName("head")[0].appendChild(script); 
    } 

//Edit 

    for (var i = 0; i < data.scripts.length; i++) { 
     include_js(data.scripts[i].file, data.scripts[i].callback); 
    } 

Answer 2

這是可能的如果有一個符號可以在每個腳本中測試，或者每個腳本可以在完成加載時執行函數調用。

加載腳本很容易，因爲我敢肯定你知道（你會看到人們追加到head代替;沒有關係，和body是很容易找到）

var script = document.createElement('script'); 
script.src = /* ... the source path ... */; 
document.body.appendChild(script); 

但困難的部分是知道它何時被下載和執行。唯一真正的方法是通過輪詢來查看由腳本定義的新全局符號是否已經定義，或者在腳本完成加載時腳本會主動回覆（a'la JSONP）。

無論哪種方式，一旦您檢測到符號或獲得回調，然後您繼續加載下一個腳本。

這裏是做找到一個全球性的符號（在window對象上的屬性）的基礎上的快速和骯髒的草圖：

// The scripts to load 
var scriptList = { 
    scripts: [ 
     { 
      file : 'some-script.js', 
      callback: function() { 
       // do some code here 
      }, 
      symbol : "someSymbol", 
      timeout : 30000 // We know this one is slow, give it 30 seconds 
     }, 
     { 
      file : 'another-script.js', 
      callback: function() { 
       // do some code here 
      }, 
      symbol : "anotherSymbol" 
     }, 
     // ... 
    ] 
}; 

// Triggering the load 
loadScripts(scriptList); 

// Library routines to do the load 
function loadScripts(list) 
{ 
    var index, timeout; 

    // Start with the first one (loadNextScript starts with an increment) 
    index = -1; 
    loadNextScript(); 

    // This function loads the next script in the list; if there are no 
    // more, it simply returns 
    function loadNextScript() 
    { 
     var script; 

     // Are there more? 
     ++index; 
     if (index < list.length) 
     { 
      // Yes, append a `script` element 
      script = document.createElement('script'); 
      script.src = list.file; 
      document.body.appendChild(script); 

      // Determine when to time out 
      timeout = new Date() + (list[index].timeout || 20000); // Time out in Xms, default 20 seconds 

      // Start polling 
      setTimeout(pollForScript, 0); // Async, but almost immediately (4-10ms on most browsers) 
     } 
    } 

    // This function polls to see if the current script has loaded yet by 
    // checking for a global symbol it defines. 
    function pollForScript() 
    { 
     var result; 

     // Has it been too long? 
     if (new Date() > timeout) 
     { 
      // Yes 
      result = "timeout"; 
     } 
     else 
     { 
      // Has the symbol been defined? 
      if (typeof window[list[index].symbol] !== "undefined") 
      { 
       // Yes 
       result = "loaded"; 
      } 
      else 
      { 
       // Nope, keep waiting 
       setTimeout(pollForScript, 250); // Check every quarter-second 
      } 
     } 

     // Did we get a result? 
     if (result) 
     { 
      // Yes, do the callback telling it of the result 
      try { 
       list[index].callback(result); 
      } 
      catch (e) { 
      } 

      // Load the next script 
      loadNextScript(); 
     } 
    } 
} 

Answer 3

讓回調打電話給你loadTheNextScriptInList或任何功能。您可以通過向onLoad事件添加匿名函數來自動執行此操作。這個匿名函數應該首先調用列表中的回調集，然後調用你的loadTheNextScriptInList函數。

Answer 4

這只是我寫了和HAVENT TESTED的快速的東西，但它應該以遞歸的方式做你以後的事情。希望這會有所幫助：

var data = { 
    scripts: [ 
     { 
      file : 'some-script.js', 
      callback: function() { 
       // do some code here 
      }, 
     }, 
     { 
      file : 'another-script.js', 
      callback: function() { 
       // do some code here 
      }, 
     }, 
     ... 
    ] 
}; 


$(document).ready(function() { 

    if(data.scripts.length > 0) { 
     scriptLoader(0); 
    } 

}); 

function scriptLoader(i) { 


    var currScript = data.scripts[i]; 


    $.getScript(currScript.file, function() { 

     // execute your callback 
     currScript.callback(); 

     // load next script 
     if(i < data.scripts.length) { 
     scriptLoader(i++); 
     } 

    }); 

} 

哦，順便說一句，這使用JQuery JavaScript框架，只是FYI。