登录  /  注册
首页 > web前端 > js教程 > 正文

如何让javascript文件动态加载时是顺序执行的(代码如下)

不言
发布: 2019-01-15 10:08:12
转载
3282人浏览过

本篇文章给大家带来的内容是关于如何让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文件动态加载时是顺序执行的(代码如下)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号