本篇文章主要教給大家如何在javascript中動態載入按順序載入運行js的方法以及實作程式碼，需要的朋友參考學習下吧。
首先如果大家對JS動態載入有不理解的地方可以參考：
javascript動態載入實作方法
動態載入JS檔的三種方法
如何你的script 上沒有任何異步,阻塞等標註:
瀏覽器會異步加載javascript 文件,但是會按照引用文件中的書寫順序從上到下執行解析javascript
#Defer屬性標記
defer是html4.0中定義的，該屬性使得瀏覽器能延遲腳本的執行，等文檔完成解析完成後會按照他們在文檔出現順序再去下載解析。
也就是說defer屬性的script 就類似於將script 放在body中的載入效果一致.
但是defer屬性在各個瀏覽器中支援程度有點不同,就是說,有的瀏覽器不完全支援.
Async屬性標註
async是HTML5新增的屬性， 大部分先進支援該屬性的.
該屬性的作用是讓腳本能異步加載，也就是說當瀏覽器遇到async屬性的script 時瀏覽器加載css一樣是異步加載的
javascript 動態加載js文件
#原理很簡單,建立一個script 節點,給節點賦予script 的屬性,然後append 到dom 的head 標籤中.
function loadJS(url){
var Script = document.createElement('script');
Script.setAttribute('src', url);
Script.setAttribute('type', 'text/javascript');
document.body.appendChild(Script);
return Script;
}如果我們同時載入多個javascript 檔案
loadJS('a.js'); loadJS('b.js');
上面的效果是,a.js 和b.js 檔案會被非同步同時載入,如果b.js 檔案比a.js 檔案小的話,很可能先載入執行b.js ,完全不會按照書寫結果載入執行
所以,如果你的b.js 檔案有依賴a.js 的東西,那麼就會報錯,因為解釋執行b.js 的時候,a.js 還在載入中.
控制javascript 載入執行順序
我們對程式碼做如下改進
function loadJS(url, success) {
var domScript = document.createElement('script');
domScript.src = url;
success = success || function () {
};
domScript.onload = domScript.onreadystatechange = function () {
if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
success();
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
}透過script 節點上的onload 和onreadystatechange 屬性來監聽節點src 是否載入完成
如果成功,調用回呼函數success();
我們在呼叫此方法的時候,可以透過loadJS 回呼函數來知道目前節點已經載入完成,然後在回呼函數裡繼續載入其他script 檔案
loadJS(getUrl('a.js'), function () {
loadJS(getUrl('b.js'), function () {
console.log('a.js ,b.js 加载完成');
});
});透過上面的方法載入,是一種同步阻塞載入, a.js 載入完成後才會載入執行b.js 檔案.
如果你的javascript 檔案沒有互相依賴關係,不要使用這種方法.
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是在javascript中如何實作按順序載入運行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
