JavaScript ResizeObserver页面加载时无法稳定执行回调函数问题

问题根因 #

1. 元素ID不匹配：代码中通过document.getElementById("idContentContainer")获取待监听元素，但给出的HTML代码里仅存在ID为idMainContent的<main>标签，不存在对应ID的元素，会导致获取结果为null，ResizeObserver监听空对象自然不会触发任何回调，这是代码放DOMContentLoaded外部完全不执行的核心原因。
2. 函数语法错误：fnSetElementSizingVariables的定义缺少function关键字，且函数结束符号错误使用了右括号)而非右大括号}，语法错误会导致函数初始化失败，无法正常执行。
3. 渲染时序问题：即使JS放在HTML底部，也不代表元素已经完成样式计算和渲染，若启动监听时元素还处于尺寸为0的状态，就符合官方规则中不触发首次回调的条件，会出现执行不稳定的情况。
4. 重复绑定冗余：同时绑定resize事件、ResizeObserver、load事件手动调用，三个触发逻辑叠加自然会导致函数重复执行。

修复方案 #

首先修正元素ID，保证HTML里的元素ID和JS获取的ID完全对应，再修正函数语法错误，最后优化执行逻辑即可解决问题，参考代码如下：

document.addEventListener('DOMContentLoaded', () => {
    // 替换为实际的元素ID
    const constContentContainer = document.getElementById("idContentContainer");
    // 元素不存在直接终止逻辑
    if (!constContentContainer) return;

    function fnSetElementSizingVariables() {
        // 你的业务逻辑
    }

    // 初始化手动调用一次，保证首次加载变量一定生成
    fnSetElementSizingVariables();

    // 仅用ResizeObserver监听后续所有尺寸变化场景，覆盖窗口缩放、元素手动resize等情况
    const resizeObserver = new ResizeObserver(fnSetElementSizingVariables);
    resizeObserver.observe(constContentContainer);
})

/* 对应元素的CSS不需要修改，保证ID对应即可 */
#idContentContainer{
    overflow: auto;
    resize: both;
}

<!-- 把元素ID调整为和JS/CSS对应的idContentContainer即可 -->
<main id="idContentContainer">
    <article>
        xxxx
    </article>
</main>

调整后不需要再额外绑定resize事件和load事件手动调用，不会出现重复执行的问题，也能保证首次加载变量一定生成。

内容的提问来源于stack exchange，提问作者CES