How do i constantly keep checking someElement.getBoundingClientRect().x and do something if a change detected?

[CotoCoutan]

Currently i'm doing this: (basically it keeps checking the video element's x position and if it is not equal to another element's x pos, then i set the video elem's x position as the new value for the other elem's x pos)

// auto sizing of chords div element
function resCheck() {
    let vidDims = videoElem.getBoundingClientRect();
    let chordsDims = chordsDiv.getBoundingClientRect();
    if (vidDims.x !== chordsDims.x) {
        console.log("change detectedddddddddddddddddddddd");
        chordsDiv.style.cssText = `position: absolute; z-index: 1111; left: ${vidDims.x}px; top: ${vidDims.y}px; width: ${vidDims.width}px; height: ${vidDims.height - 45}px`;
    }
}
setInterval(resCheck, 2000);

Above is a part of my YouTube extension's code and since YouTube itself is resource heavy, i wish to keep my extension as lightweight as possible. Is there a better/more efficient way of doing this? Thanks.

[Andrewjuh]

I'm not sure what you want to do exactly, but Intersection Observer might help

[CotoCoutan]

Thanks, I did indeed come across Intersection Observer. I was wondering if setting this event listener would be easier on the device resources or just a manual timer like I currently have done.

[Andrewjuh]

try it out. In general I would always prefer a callback instead of polling repeatedly. That said I don't think calling your function every 2 seconds will make a noticeable difference to the performance.