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

Posted 2023-02-22

【中文标题】在 window.onload = function() 之后协调多个 Javascript 文件按顺序加载

【英文标题】：Coordinating multiple Javascript files to load in order after window.onload = function()

【发布时间】：2014-01-28 21:26:27

【问题描述】：

我发现当我将媒体内容添加到我的 html5 程序时，除非我在 window.onload = 函数（）

问题是，即使我的脚本包含在我希望它们运行的​​顺序中，如果我将每个脚本包装在 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 之前没有“运行”。事实上，我所有的执行功能都在那个之下。但是我尝试在其他文件中声明其他函数，无论是否将该 .js 文件包装在 window.onload = function() 中，但它给了我错误。

我收到“未捕获的 ReferenceError：未定义 Foo”

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

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

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

我尝试将其他 .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
    ;
)();

【问题讨论】：

window.onload = function() function1(); function2(); function3()

关键是你的代码在window.onload之前不应该做任何事情，此时文件已经全部加载。它们在被包含后立即运行的事实表明，您的代码结构存在更大的问题。

我同意这一点，但问题仍然存在。

我扩展了这个问题，试图更清楚地描述这个问题。

下面的答案是否帮助您解决了问题？

【参考方案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，而应仅定义代码示例中提到的函数。

【讨论】：

您可能想为此添加一个示例——在当前状态下，这更像是一条评论。