实现javascript文件动态加载时是顺序执行的方法-创新互联

这篇文章将为大家详细讲解有关实现javascript文件动态加载时是顺序执行的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

之前在写js代码时，想通过代码动态向html中插入一定数量的js文件，文件的依赖关系已经按顺序排好，关键代码大致如下：

var jsFiles = ['somepath/a.js','somepath/b.js',...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = file;
    head.appendChild(script);
});

但是在代码执行的过程中，很高频率的报同一个错，大概的意思就是说：b.js在执行的时候引用的a.js中的方法不存在。错误出现的评率很高，但也不是100%出错。

通过分析我觉得原因应该是这样的： 虽然我是按数组中定义的顺序去动态创建script标签去加载对应的js文件，但是由于文件的大小以及网络等因素，导致各个文件现在完成的次序并不完全等于请求的次序。比如上面的例子中，如果a.js文件比较大，下载的比b.js慢，这样当b.js下载完成并开始执行的时候，他所依赖的a.js中的变量或方法就会获取不到。

想到的解决方法就是，等前一个文件加载完毕之后再去加载下一个文件，大致代码如下：

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
}

上面的方法也可以改为链式的Promise调用或者回调嵌套，虽然最终解决了问题，但是有一个问题，文件从异步加载变成了同步加载，增加了的文件下载的时间，文件越多的时候影响越明显。所以正确的思路应该是异步加载文件，但是执行一个文件的时候需要等到它所依赖的文件加载完毕并首先执行，对于这个问题，大家可以借鉴第三方库如require.js, 或者es6中引入的模块化功能完美解决这些问题。

关于实现javascript文件动态加载时是顺序执行的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。