为什么在将函数分配给window.onload时脚本顺序很重要？

Question

为什么在将函数分配给window.onload时脚本顺序很重要？

3

I have a website with three files:

index.html

<html>
<head>
<script src="First.js"></script>
<script src="Second.js"></script>
</head>
<body></body>
</html>

First.js

window.onload = Main;

Second.js

function Main() { var foo = 1; }

当我打开页面时，我期望变量'foo'被设置为'1'。然而，当我打开页面时，它会崩溃，并显示“Main未定义”，并且'Main()'从未被调用。

如果窗口的'.onload'事件不应该在页面完全加载之前触发，因此假定两个脚本都已加载，那么为什么窗口对象没有对'Second.js'中'Main()'方法的引用？ 'Main()'应该是一个全局可访问的函数吗？

注意：我意识到我可以更改加载脚本的顺序，然后我的代码可以正常工作，但这不是我的问题的目的。我真正想做的是验证我的假设。

- chopperdave

你能否发布包含这两个文件的HTML文件？ - Saebekassebil

3个回答

2

第二个脚本文件应该首先被包含进来！在那里定义了函数。在第一个脚本中无法引用它，直到它被加载完毕。

- papaiatis

我意识到这是一个解决方法，使我的代码按原样工作，但这并不是我问题的目的。目的在于了解为什么我的假设是错误的。 - chopperdave

1

Main() 函数在 Second.js 被加载之前是不存在的，因此如果你先加载 First.js，那么在 window.onload = Main; 中就没有可用的函数对象（Main 是未定义的）。如果还没有加载 Second.js，请先加载它。

- Anthony Grist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user166390 · Accepted Answer

它不起作用是因为<script>元素的代码是按顺序和独立地运行的（这假定是同步脚本，即默认情况下）。也就是说，两个不同的<script>部分不能互相引用。现在，JavaScript会在同一上下文中“提升”function name () {}结构，所以这将在单个<script>中“乱序”工作。

前言/警告：

考虑不要使用onload。如果其他东西尝试使用它（onload），那么可能会出现故障。（我建议使用jQuery，因为它“正确地解决了这个问题”并且“非常容易”……当然，许多其他框架也是如此。选择一个:-）

例如，这将在jQuery中工作：

jQuery(function () { Main() })

为什么它有效（以及如何在不重新排序脚本或使用jQuery的情况下修复它）的解释：

请注意，在这种情况下，调用了jQuery内部事件处理程序，该处理程序调用匿名回调，然后调用Main（现在已解析为函数对象）。类似的代码如下：

window.onload = function () { Main() }

这些代码之所以有效，是因为直到onload事件发生时才会执行Main，在这种情况下，所有[同步的]<script>元素都已被执行。(请参见我的评论，了解评估Main的含义。)

另一方面，window.onload = Main(或jQuery(Main))会立即评估Main并使用结果值；正如其他人所指出的那样，由于<script>元素的顺序（它们按顺序运行），此时Main未设置(“未定义”)。

请参考顶部的注释，了解为什么不直接使用onload ;-)

愉快的编码。