Javascript 如何在加载另一个脚本之前阻止脚本的执行？_Javascript_Asynchronous_Load

Javascript 如何在加载另一个脚本之前阻止脚本的执行？

javascript asynchronous

Javascript 如何在加载另一个脚本之前阻止脚本的执行？,javascript,asynchronous,load,Javascript,Asynchronous,Load,假设我从主机网页加载以下脚本： <script src="http://www.mywebsite.com/widget/widget.js?type=normal" type="text/javascript"></script> <script src="http://www.mywebsite.com/widget/widget.js?type=rotation" type="text/javascript"></script> 我想执

假设我从主机网页加载以下脚本：

<script src="http://www.mywebsite.com/widget/widget.js?type=normal" type="text/javascript"></script>
<script src="http://www.mywebsite.com/widget/widget.js?type=rotation" type="text/javascript"></script>

我想执行第二个，只有在第一个完成（完全可以包含异步函数）

如何执行此操作？

您可以在window.onload事件中放置第二个script init函数

window.onload = function(){

// call function from second script

}

或者使用jQuery

$(function(){

// call function from second script

});

您可以使用此函数添加第二个脚本

function loadScript(src){
    var f=document.createElement('script');
    if(f){
        f.setAttribute("type","text/javascript");
        f.setAttribute("src",src);
        document.getElementsByTagName("head")[0].appendChild(f);
    }
}

您可以将第二个脚本初始化函数放入window.onload事件中

window.onload = function(){

// call function from second script

}

或者使用jQuery

$(function(){

// call function from second script

});

您可以使用此函数添加第二个脚本

function loadScript(src){
    var f=document.createElement('script');
    if(f){
        f.setAttribute("type","text/javascript");
        f.setAttribute("src",src);
        document.getElementsByTagName("head")[0].appendChild(f);
    }
}

尝试将defer=“defer”属性应用于第二个

声明，如

尝试将defer=“defer”属性应用于第二个

声明，如

您已经做对了：脚本是按照页面中的集成顺序执行的，而不是加载

编辑：正如MaxArt指出的，这可能不是你想要的。他的回答很好。但通常，您希望使用javascript常用模式和基于事件的逻辑来避免此类问题：

让大多数文件只定义类和函数（其中一些将回调作为参数）
让一个
```
main
```
文件启动此操作并调用操作序列，通过回调处理异步性

我的主代码通常看起来（有点）像这样：

$(window).ready(function() {
    var myBigEngine = new BigEngine();
    myBigEngine.init(function(){
      // do other things, no need to add other layers as user events and ajax message callback will do the rest
    });
});

您已经做对了：脚本按照页面中的集成顺序执行，而不是加载

编辑：正如MaxArt指出的，这可能不是你想要的。他的回答很好。但通常，您希望使用javascript常用模式和基于事件的逻辑来避免此类问题：

让大多数文件只定义类和函数（其中一些将回调作为参数）
让一个
```
main
```
文件启动此操作并调用操作序列，通过回调处理异步性

我的主代码通常看起来（有点）像这样：

$(window).ready(function() {
    var myBigEngine = new BigEngine();
    myBigEngine.init(function(){
      // do other things, no need to add other layers as user events and ajax message callback will do the rest
    });
});

将整个脚本包装到一个函数中，如下所示：

(function(id) {
    var id = setInterval(function() {
        if (!window.doneLoading) return;
        clearInterval(id);

        // The whole script file goes here
        ...
    }, 50);
})();

function doneLoading() {
        // The whole script file goes here
        ...
}

setInterval轮询（全局，抱歉）变量

doneLoading

。在第一个脚本中，当异步函数完全加载时，您必须将

doneLoading

设置为

true

或任何其他非false值，比如在AJAX请求结束时

编辑：由于我建议在脚本中添加一个全局变量，它还可以添加一个全局函数。因此，与其设置

setInterval

调用，不如将第二个脚本包装到函数中。。。但就像这样：

(function(id) {
    var id = setInterval(function() {
        if (!window.doneLoading) return;
        clearInterval(id);

        // The whole script file goes here
        ...
    }, 50);
})();

function doneLoading() {
        // The whole script file goes here
        ...
}

在第一个脚本文件中，在回调函数的末尾，只需调用

doneLoading（）