页面加载事件中自调用功能的顺序-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事件会产生一种奇怪的效果，即页面加载后高度会调整一秒钟或2秒钟，但只是希望确保使用自调用函数是安全的，并且在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的唯一区别是变量是局部变量，而不是全局变量。