關於動態引入js時的順序問題

在項目中遇到一個問題,我們需要在一個頁面中動態加載一系列的js,並且要求規定js的加載順序,一開始我們的引用js的方法如下:

<script type="text/javascript">
var js = document.createElement("script");
js.src = '***.js';
js.type = "text/javascript";
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(js);
</script>

但是發現導入多個js時,它們的加載順序並不一定按照導入順序,先導入的js可能後被加載。詳細分析可以參考:
http://www.w3help.org/zh-cn/causes/BX9013


解決方法如參考文檔中所述,最後採用下面方法保證js順序:

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);
  // 先監聽事件,然後在加腳本
}
//執行加載外部 JS 文件
loadJS('a.js',function (){
   loadJS('b.js',function (){
    loadJS('c.js',function (){
      alert('ok');
    });
   });
});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章