JS 動態加載腳本執行回調

時間 2019-11-10

原文原文鏈接

JS 動態加載腳本執行回調

關於在javascript裏面加載其它的js文件的問題可能不少人都遇到過，但不少朋友可能並不知道怎麼判斷咱們要加載的js文件是否加載完成，若是沒有加載完成咱們就調用文件裏面的函數是不會成功的。本文講解怎麼在js中加載其它js文件並在加載完成後執行回調函數。javascript

咱們能夠動態的建立 <script> 元素，而後經過更改它的 src 屬性來加載腳本，可是怎麼知道這個腳本文件加載完成了呢，由於咱們有些函數須要在腳本加載完成生效後才能開始執行。通過對網絡上資源的搜索，我發如今 IE 瀏覽器中可使用 <script> 元素的 onreadystatechange 來監控加載狀態的改變，並經過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可使用 onload 來直接判斷腳本是否加載完成。html

一個簡單的實現過程看上去是下面這樣的：java

//IE下：
var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ alert("加載成功啦！"); } } script.setAttribute("src",scripts[i]); //Opera、FF、Chrome等： var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.onload = function() { alert("加載成功啦！"); } script.setAttribute("src",scripts[i]);

原理很簡單，根據這兩個簡單的原理，咱們進行一些修改，我把改爲了兩個函數，分別是串行加載和並行加載腳本。 jquery

當傳一個包含多個JS文件路徑的數組時，串行加載函數從第一個腳本文件加載開始，每加載成功一個便開始加載下一個腳本文件，所有加載完成後執行回調函數。而並行加載是一開始便加載所有的腳本文件，也就是他們從同一點開始加載，當所有加載完成後，執行回調函數。ajax

通過測試，這兩個函數兼容目前的全部主流瀏覽器。api

/** * 串聯加載指定的腳本 * 串聯加載[異步]逐個加載，每一個加載完成後加載下一個 * 所有加載完成後執行回調 * @param array|string 指定的腳本們 * @param function 成功後回調的函數 * @return array 全部生成的腳本元素對象數組 */ function seriesLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [scripts]; var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement; var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //遞歸 s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback(); } } s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); }; recursiveLoad(0); } /** * 並聯加載指定的腳本 * 並聯加載[同步]同時加載，無論上個是否加載完成，直接加載所有 * 所有加載完成後執行回調 * @param array|string 指定的腳本們 * @param function 成功後回調的函數 * @return array 全部生成的腳本元素對象數組 */ function parallelLoadScripts(scripts,callback) { if(typeof(scripts) != "object") var scripts = [scripts]; var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0; for(var i=0; i<scripts.length; i++) { s[i] = document.createElement("script"); s[i].setAttribute("type","text/javascript"); s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") { loaded++; this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); if(loaded == scripts.length && typeof(callback) == "function") callback(); } }; s[i].setAttribute("src",scripts[i]); HEAD.appendChild(s[i]); } }

在這裏是把 <script> 標籤動態的插入到頁面中的 <head> 標籤內部，而且加載完成後標籤元素會被自動移除。細心的你還會發現，這裏使用了一種稱做條件編譯的方法做爲表達式（!/*@cc_on!@*/0）來判斷是否非 IE 瀏覽器，關於條件編譯並非本文的重點，有興趣的您能夠上網查找相關資料進行學習。跨域

這兩個函數的使用方法：這裏咱們聲明瞭一個數組變量，裏面包含了兩個遠程的JS文件地址（固然 <script> 標籤調用腳本是支持跨域的）：數組

var scripts = [ "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.js" ]; //這兩個文件分別是 jQuery 1.4.的庫文件和 jQuery Debug 插件 //而後你可使用下面的方法調用並在成功後執行回調了。 seriesLoadScripts(scripts,function(){ /* debug = new $.debug({ posTo : { x:'right', y:'bottom' }, width: '480px', height: '50%', itemDivider : '<hr>', listDOM : 'all' }); */ alert('腳本加載完成啦'); });

這裏使用的是串聯加載的函數，固然你也可使用並聯加載函數，這能夠根據狀況使用，建議每下一個腳本對上一個腳本有依賴性的使用串聯加載，不然使用並聯，由於原理上並聯要比串聯快那麼些。瀏覽器