页面加载事件中自调用函数的顺序 - javascript/html

Question

我正在寻找根据页面加载中的事件顺序找出自调用 js 函数发生的顺序。我一直在谷歌上搜索这个问题的答案，但没有找到任何确定的答案。

至于这实际上适用于什么，我正在根据其中一个内部元素的高度调整外部元素的高度（具体取决于文本长度和屏幕宽度）

    var text_elem = document.getElementById('text_elem');
    var textElemHeight = text_elem.offsetHeight;
    var newBkgdHeight = 96 + textElemHeight;
    document.getElementById('background').style.height = newBkgdHeight + "px";

截至目前，此块是在自调用函数中执行的，而不是在 onload 事件中执行，因为在 onload 事件中有一个奇怪的效果，即页面加载后高度会调整一秒或两秒，但只是想要确保使用自调用函数是安全的，并且其中的代码不可能在 HTML DOM 加载之前执行。

编辑：

请注意，这是使用自调用函数或 IIFE 正常工作的，我只是想确保它是安全的并且将始终如一地工作，如果是的话，我可以向同事更好地解释这一点。

这里是这种情况的相关代码：

<style type="text/css">
    #background {
        height: 150px;
    }
</style>
......
......
<div id="background">
   <div id="text_elem">
      ${text loaded from somewhere else}
   </div>
</div>
......
......
<script>
(function() {
    var text_elem = document.getElementById('text_elem');
    var textElemHeight = text_elem.offsetHeight;
    var newBkgdHeight = 96 + textElemHeight;
    document.getElementById('background').style.height = newBkgdHeight + "px";
})();
</script>

Answer 1

您的 IIFE 将在加载包含它的 <script> 块后立即执行。

由于位于HTML的末尾，所以会在前面的HTML全部加载到DOM后执行。

执行时间与您根本没有将其放入 IIFE 中，只是将其编写为顶级 JavaScript 代码没有什么不同。与将它放在 IIFE 中的唯一区别是变量是局部的而不是全局的。

页面加载事件中自调用函数的顺序 - javascript/html

Order of self-invoking function in page load events - javascript/html

html

javascript

dom

onload

self-invoking-function