Esta es la primera vez que intento usar ResizeObserver y no estoy seguro de lo que estoy haciendo mal.

El problema que veo es que ResizeObserver no ejecuta CONSTANTEMENTE la función fnSetElementSizingVariables() cuando se carga la página y, como tales, las variables que son necesarias para la página no están disponibles.

Si muevo el ResizeObserver fuera de la ventana.addEventListener("DOMContentLoaded", (evento), el ResizeObserver no se ejecuta cuando se vuelve a cargar la página.

El ResizeObserver, según tengo entendido, se supone que se activa inicialmente cuando el elemento en el que está colocado se representa inicialmente en la página, pero se hace referencia al archivo .js en la parte inferior del archivo html, por lo que el elemento ya se ha representado y si eso es el caso es por qué la función fnSetElementSizingVariables() se ejecuta con mayor frecuencia cuando la página se carga inicialmente. Como veis estoy totalmente confundido...

• La observación se activará cuando comience la observación si se está procesando el elemento y el tamaño del elemento no es 0,0.

Javascript ResizeObserver se activa de forma inesperada

La única forma en que puedo asegurar que las variables estén cargadas es crear un nuevo evento window.addEventListener("load") y llamar a la función fnSetElementSizingVariables(), pero eso hace que las variables, MÁS A MENUDO, se creen dos veces .

Cualquier ayuda con lo que estoy haciendo mal sería muy apreciada. Gracias de antemano - CES

 const constContentContainer = document.getElementById("idContentContainer"); fnSetElementSizingVariables(){ // Do Something ) window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("resize", (event) => { fnSetElementSizingVariables(); }); const constResizeObject = new ResizeObserver(fnSetElementSizingVariables); constResizeObject.observe(constContentContainer); }) // If I move the ResizeObserver outside of the window.addEventListener("DOMContentLoaded", (event) => Above // The ResizeObserver doesn't exicute window.addEventListener("load", (event) => { // This was only added because variables we're not always being set by the ResizeObserver. fnSetElementSizingVariables(); });

 #idContentContainer{ overflow: auto; resize: both; }

 <main id="idMainContent"> <article> xxxx </article> </main>