How can I throttle a ResizeObserver?

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.

The behaviour of ResizeObserver could only be modified if you would recreate that constructor. It will indeed be simpler to just throttle/debounce 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 debounce(f, delay):

function debounce(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>