javascript - 如何动态加载JS文件时阻塞之后的JS执行，在动态加载的JS文件加载完成后才执行接下去的代码?

问题描述

问 题

index.html

<script src='a.js'>
b.func();

a.js

var oHead = document.getElementsByTagName('head')[0];

var oScript = document.createElement('script');

oScript.setAttribute('src','b.js');

oScript.setAttribute('type','text/javascript');

oHead.appendChild(oScript);

b.js

var B = function (){
}

B.prototype.func = function(){
    alert('call b func')
}

var b = new B();

如上代码所述，我希望在index.html中通过a.js来动态的加载b.js，并调用b.js中提供的b.func()方法，但是在a.js加载b.js时这是异步的，也就是b.js还未加载完成就执行到了index.html中的b.func()，导致程序出错。有没有办法在a.js加载b.js时阻塞之后的JS执行，直到b.js加载完成呢？要求不能修改index.html的代码，因此不能把调用b.func()的语句放入b.js的onload中去

解决方案

看了楼主的情景：

回调不合适 ，因为b.func()的调用不是在a.js中完成，实际上这个问题出现的场景是a.js是由我编写的一个sdk,sdk中去动态加载另一个js文件，index.html才是sdk的实际使用者，他需要使用b.js中的内容

觉得这样的SDK设计的使用方式是不合理的。竟然你的sdk种需要异步加载其他代码，那么在你的sdk种一定要提供一个机制，回调或者事件来告诉使用者代码都加载完了，他可以安全的使用sdk的方法了。就像是document ready一样，你需要有个sdk ready

这篇关于javascript - 如何动态加载JS文件时阻塞之后的JS执行，在动态加载的JS文件加载完成后才执行接下去的代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！