动态加载javascript文件时，如何让文件顺序执行

TwIStOy 发布于2019-08-02 14:06 / 670人阅读

摘要：通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件，但是由于文件的大小以及网络等因素，导致各个文件现在完成的次序并不完全等于请求的次序。

之前在写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中引入的模块化功能完美解决这些问题。

idc机房托管超融合服务器 javascript执行顺序 javascript加载文件 javascript文件加载如何执行asp文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53577.html

动态加载javascript文件时，如何让文件顺序执行

摘要：通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件，但是由于文件的大小以及网络等因素，导致各个文件现在完成的次序并不完全等于请求的次序。之前在写js代码时，想通过代码动态向html中插入一定数量的js文件，文件的依赖关系已经按顺序排好，关键代码大致如下： var jsFiles = [somepath/a.js,somepath/b.js,...]...

Tangpj 2019-08-23 14:43 评论0 收藏0
动静分离的数据并发加载策略

摘要：关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性，将其应用于数据请求相关的上，就可以达到脚本与数据并发加载的效果。作者：莫冠钊转载请注明出处，保留原文链接和作者信息前言当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理—动静分离策略。本人是做前端的，之前有幸与一...

Object 2019-08-21 14:07 评论0 收藏0
动静分离的数据并发加载策略

摘要：关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性，将其应用于数据请求相关的上，就可以达到脚本与数据并发加载的效果。作者：莫冠钊转载请注明出处，保留原文链接和作者信息前言当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理—动静分离策略。本人是做前端的，之前有幸与一...

MrZONT 2019-08-06 13:17 评论0 收藏0
动静分离的数据并发加载策略

摘要：关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性，将其应用于数据请求相关的上，就可以达到脚本与数据并发加载的效果。作者：莫冠钊转载请注明出处，保留原文链接和作者信息前言当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理—动静分离策略。本人是做前端的，之前有幸与一...

mating 2019-08-02 18:53 评论0 收藏0
50道JavaScript基础面试题（附答案）

摘要：事件中属性等于。响应的状态为或者。同步在上会产生页面假死的问题。表示声明的变量未初始化，转换为数值时为。但并非所有浏览器都支持事件捕获。它由两部分构成函数，以及创建该函数的环境。 1 介绍JavaScript的基本数据类型Number、String 、Boolean 、Null、Undefined Object 是 JavaScript 中所有对象的父对象数据封装类对象：Object、...

huaixiaoz 2019-08-22 18:04 评论0 收藏0