How can I throttle a ResizeObserver?

Question

I currently use a ResizeObserver to watch the size of an element but I was thinking of using a throttle (lodash's throttle) to increase the performance of it.

const myResize = new ResizeObserver((entries) => {
    const el = document.querySelector('#foo');
    // get boundingRect and adjust height
});

let imageToWatch = document.querySelector('.image');
myResize.observe(imageToWatch);

is there a way I can throttle this? Would the throttle just be on the logic inside myResize ? I assume I can't throttle the observe portion of this though.

Answer 1

The behaviour of ResizeObserver could only be modified if you would recreate that constructor. It will indeed be simpler to just throttle the callback function that you pass to that constructor.

To demo this, here is a textarea element, which by default can be resized interactively. The handler will change the background color of the textarea, but only if 1 second passed after the last event. For this purpose the handler is wrapped in a call to throttle(f, delay) :

 function throttle(f, delay) { let timer = 0; return function(...args) { clearTimeout(timer); timer = setTimeout(() => f.apply(this, args), delay); } } const myResize = new ResizeObserver(throttle((entries) => { entries[0].target.style.backgroundColor = "#" + (Math.random() * 4096 | 0).toString(16); }, 1000)); const elemToWatch = document.querySelector('textarea'); myResize.observe(elemToWatch);

 <textarea></textarea>