0

我希望根据页面加载中的事件顺序找出自调用 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>
4

1 回答 1

1

<script>一旦加载了包含它的块，您的 IIFE 就会执行。

由于它位于 HTML 的末尾，因此它将在所有较早的 HTML 加载到 DOM 后执行。

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

于 2019-12-16T22:45:38.063 回答