Question

我发现当我向HTML5程序添加媒体内容时，除非我在一个内部运行脚本，否则一切都无法正常工作 window.onload = function（）{ }

问题在于，即使我的脚本按照我希望它们运行的顺序包含在内，如果我将每个脚本包装在window.onload = function（）中，我会收到看起来没有运行的错误顺序。

在我的.html文件中：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>

是否有正确的方法告诉我的所有脚本在window.onload之后运行，以便按顺序加载内容并且我没有关于未声明的函数和变量的问题，即使我想拆分我的项目直到多个.js文件使其更易于管理？

我把这个声明放在window.onload下，因为如果我试图在window.onload之前声明bgm“audio1”，它会表现得像资源不存在一样。

var Foo = {
choice: ["0", "0", "0", "0", "0"],
bgm: document.getElementById("audio1"),
song1: "test.mp3"
};

在window.onload之前没有'运行'。事实上，我所有的执行功能都在那个之下。但我试图在其他文件中声明其他函数，无论是否在。window = function（）{}中包装.js文件，但它给了我错误。

我收到了“Uncaught ReferenceError：Foo未定义”

当我在最后执行的.js文件中声明Foo时，会发生这种情况，并且它位于window.onload包装器中。

之前的脚本有函数（它们只是函数，它们不会被调用，直到最后一个包含在window.onload中的.js脚本）才能查找该Foo变量。

如果我把Foo放在那个文件中，它找不到document.getElementById（“audio1”），因为我认为它还没有被加载。如果我把它放回到这里，它会找到audio1，但声明的其他函数不能使用该变量。我发现的唯一解决方案是在window.onload函数下将整个javascript应用程序混合到一个文件中。

我尝试将其他.js函数包装在自己的window.onload函数中，但后来我得到一个错误，即未定义那些早期脚本中声明的函数。

3.js

window.onload = function() {

var Foo= {
    choice: ["0", "0", "0", "0", "0"],
    bgm: document.getElementById("audio1"),
    };

Game.NewArea("newgame");
}

2.js

var Game = (function() {
function NewArea($area) {
        switch($area)
    {
    case "newgame": 
        $("#textbox").html("Test");
        $("#choice0").html("Look");
        Foo.choice[0] = "look_1";
        Foo.bgm.play();
        break;

        default: break;
        }
    }
    return {
        NewArea: NewArea
    };
})();

Answer 1

你不能只在三个JS文件的每一个中定义一个普通函数，然后添加第四个文件/脚本部分，以正确的顺序在窗口加载时调用它们吗？

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script type="text/javascript">
window.onload(function() {
    one(); //Function from 1.js
    two(); //Function from 2.js
    three(); //Function from 3.js
    four(); //Function from 4.js
})
</script>

请注意，JS文件不应使用window.onload，而只是定义代码示例中提到的函数。

在window.onload = function（）之后协调多个Javascript文件按顺序加载

1 个答案: