首先如果大家对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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“javascript按顺序加载运行js方法”
暂无“javascript按顺序加载运行js方法”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。