項目中經常會遇到這樣的問題：當某個 js 腳本加載完成后再執行相應任務，但很多朋友可能并不知道怎么判斷我們要加載的 js 文件是否加載完成，如果沒有加載完成我們就調用 js 文件里面的函數是不會成功的。本文主要講解怎么在成功加載 js 文件后再執行相應回調任務。

基本思路

我們可以動態的創建 <script> 元素，然后通過更改它的 src 屬性來加載腳本，但是怎么知道這個腳本文件加載完成了呢？因為有些函數需要在腳本加載完成才能調用。IE 瀏覽器中可以使用 <script> 元素的 onreadystatechange 來監控加載狀態的改變，并通過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否加載完成。

動態腳本簡單示例

一個 簡單 的實現過程如下：

// IE下：var HEAD = document.getElementsByTagName('head')[0] || document.documentElementvar src = 'http://xxxxxx.com'var script = document.createElement('script')script.setAttribute('type','text/javascript')script.onreadystatechange = function() { if(this.readyState === 'loaded' || this.readyState === 'complete') {  console.log('加載成功！') }}script.setAttribute('src', src)HEAD.appendChild(script)// Chrome等現代瀏覽器：var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;var src = 'http://xxxxxx.com'var script = document.createElement('script')script.setAttribute('type','text/javascript')script.onload = function() { console.log('加載成功!')}script.setAttribute('src', src)HEAD.appendChild(script)

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

串行和并行動態腳本

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

/**  * 串行加載指定的腳本 * 串行加載[異步]逐個加載，每個加載完成后加載下一個 * 全部加載完成后執行回調 * @param {Array|String} scripts 指定要加載的腳本 * @param {Function} callback 成功后回調的函數 * @return {Array} 所有生成的腳本元素對象數組 */function seriesLoadScripts(scripts, callback) { if(typeof(scripts) !== 'object') {  var scripts = [scripts]; } var HEAD = document.getElementsByTagName('head')[0] || document.documentElement; var s = []; var last = scripts.length - 1; //遞歸 var recursiveLoad = function(i) {  s[i] = document.createElement('script');  s[i].setAttribute('type','text/javascript');  // Attach handlers for all browsers  // 異步  s[i].onload = s[i].onreadystatechange = function() {   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} scripts 指定要加載的腳本 * @param {Function} callback 成功后回調的函數 * @return {Array} 所有生成的腳本元素對象數組 */ function parallelLoadScripts(scripts, callback) { if(typeof(scripts) !== 'object') {  var scripts = [scripts]; } var HEAD = document.getElementsByTagName('head')[0] || document.documentElement; var s = []; var loaded = 0; for(var i = 0; i < scripts.length; i++) {  s[i] = document.createElement('script');  s[i].setAttribute('type','text/javascript');  // Attach handlers for all browsers  // 異步  s[i].onload = s[i].onreadystatechange = function() {   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]); }}