Question

假设我从主机网页加载这些脚本：

<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>

我只想在第一个完成时执行第二个（完全;它可以包含异步函数）。

我该怎么做？

Answer 1

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

编辑：正如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
    });
});

Answer 2

尝试将defer =“defer”属性应用于第二个<script>声明，如

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

Answer 3

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

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

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

setInterval轮询（全局，抱歉）变量doneLoading。在第一个脚本中，您必须在异步函数完全加载时将doneLoading设置为true或任何其他非假值，例如在AJAX请求结束时可能会这样？

编辑：因为我建议在脚本中添加一个全局变量，所以它也可以添加一个全局函数。因此，不是设置setInterval调用，而是将第二个脚本包装在函数中......但是像这样：

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

在第一个脚本文件中，在回调函数结束时，只需调用doneLoading()。

Answer 4

你可以在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);
    }
}

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

4 个答案: