一个文件中的 Javascript 窗口加载和依赖函数及其在另一个文件中的调用 : order of execution

Question

我有两个 Javascript 文件:

drawField.js和 updateState.js

drawField.js 有这个调用:

window.onload = function()  {
    drawField(10);
}

它创建了一个元素 <div id="game-field"> .

在 updateState.js 文件中我使用了那个元素:

function getGameField()  {
    var gameDivs = document.getElementById("game-field").children;
    console.log(gameDivs);


}
getGameField();

但是出现错误:元素null 没有子元素.

如果我将 getGameField()内拨window.onload ，它工作得很好。这让我相信对函数的调用在 div 之前执行。被 build 。为什么会这样？首先，不是 onload功能应该是页面加载后要做的第一件事吗？其次，我将第一个和第二个文件像这样导入到我的页面中:

<script src="${pageContext.request.contextPath}/js/drawField.js"></script>
<script src="${pageContext.request.contextPath}/js/updateState.js"></script>
</body>
</html>

这让我相信 drawField.js 中的代码将在 updateState.js 中的代码之前执行，但似乎并非如此。

如果不放置 getGameField()，我该如何解决这个问题？内拨window.onload ？

Answer 1

First, isn't the onload function supposed to be the first thing done once a page is loaded?

页面的 onload 事件在加载 后触发。从技术上讲，当页面的所有 javascript 文件在浏览器中加载并执行时，页面就被认为已加载。所以当 updateState.js 文件被执行时，函数 getGameField 也被执行，当它搜索元素时，它找不到它，因为它还没有被创建。

How would I fix this problem, without placing getGameField() call inside window.onload?

如果 window.onload Not Acceptable ，我建议将 getGameField 放在回调中。