关于动态引入js时的顺序问题

最新推荐文章于 2023-06-21 10:49:24 发布

原创最新推荐文章于 2023-06-21 10:49:24 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

工程开发经验专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在网页中按指定顺序动态加载JavaScript文件的方法。通过使用自定义函数`loadJS`并监听`onload`事件，确保了脚本加载的顺序性。

在项目中遇到一个问题，我们需要在一个页面中动态加载一系列的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');
    });
   });
});