动态加载js如何保证顺序执行？

我们知道，可以使用创建script标签的方法来动态加载js文件。

但随之带来问题，如果创建多个script标签来加载多个js文件，这些文件是异步并行加载的，默认添加了async属性，最后执行顺序不能保证是当初的scrpit标签创建顺序。

也就是说，如果我们引入的js之间有依赖关系，能不能加载成功不报错就是个随机事件了～

function createScript (src) {let script = document.createElement('script');script.src = src;document.body.appendChild(script);
};createScript('a.js');
createScript('b.js');
// 假定b.js依赖a.js的文件内容，因为网络等原因可能b.js会在a.js之前加载完，导致报错

因此上面的代码需要改进一下，通过监听onload 和 onreadystatechange，确保a.js全部执行完成后，才能加载b.js。

参考http://www.w3help.org/zh-cn/causes/BX9013

// 方法一：
function createScript(url, success) {let script = document.createElement('script');script.src = url;success = success || function(){};script.onload = script.onreadystatechange = function() {// onreadystatechange和readyState针对ieif (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {success();this.onload = this.onreadystatechange = null;this.parentNode.removeChild(this);}}document.body.appendChild(script);
}
//顺序执行加载外部 JS 文件
createScript('a.js',function (){createScript('b.js',function (){alert('ok');});
});

到这里就实现了动态加载js也能按顺序执行的效果。

然而这个解决方法实在是太长，所以找到了另一种简单粗暴的方法。

一开始script标签中的async属性不管是设置为true or false，都会在下载该js脚本的同时，不阻塞页面其他操作，且下载完会立即执行。

在Kyle Simpson的提议下，动态插入的script标签默认设置了属性async=true，以期异步执行。同时也可以设置async=false来保持插入顺序执行。(并行加载，顺序执行)

The proposal basically preserves Webkit (and IE)'s current default behavior, but in a more formalized and flexible way, which is that any script inserted dynamically will essentially default to behaving like a parser-inserted script with `async=true`.
该提议基本上保留了Webkit（和IE）的当前默认行为，但是以一种更加形式化和灵活的方式，即，动态插入的任何脚本本质上都将默认表现为具有async = true的解析器插入脚本。

The requested extension is that a dynamically inserted script tag which has `async=false` set on it will go into a separate loading "queue" of sorts, in that all such scripts with `async=false` will load in parallel but will execute in insertion order.
要求的扩展是动态插入的脚本标签上设置了async = false，它将进入单独的各种加载“队列”，因为所有带有async = false的脚本都将并行加载但将执行按照插入顺序。

所以我们只需要加上 "async=false" ：

// 方法二：
function createScript (src) {let script = document.createElement('script');script.src = src;// 保证JS顺序执行！script.async = falsedocument.body.appendChild(script);
};createScript('a.js');
createScript('b.js');

一行代码解决问题，完美

动态加载js如何保证顺序执行？相关推荐

html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
实现动态加载JS脚本有4种方法
转自:微点阅读 https://www.weidianyuedu.com 实现动态加载JS脚本有4种方法: 1.直接document.write 这里重新温习Document.write()的用法, ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
4种动态加载JS的方法
要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...
转：JS动态加载JS
JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...
JavaScript 之动态加载JS代码或JS文件
2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var ...
动态加载JS脚本【转】
原文:http://mario-design.iteye.com/blog/147810 要实现动态加载JS脚本有4种方法: 1.直接document.write <script languag ...
php动态页面加载慢,通过动态加载JS文件提升网站访问速度
相对与HTML,CSS,javascript是最影响浏览器性能的,因为浏览器在遇到<script>标签时,必须等待js代码下载和执行完毕后再执行后面的内容,因此当页面中js文件过多时,网站 ...

动态加载js如何保证顺序执行？

动态加载js如何保证顺序执行？相关推荐

最新文章

热门文章