javascript - 如何限制 ResizeObserver？

Question

我目前使用 ResizeObserver 来观察元素的大小，但我正在考虑使用 throttle (lodash 的 throttle )来提高它的性能。

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

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

有什么办法可以 throttle这个？ throttle 是否只是在 myResize内部的逻辑上？ ?我假设我无法限制 observe这虽然的一部分。

Answer 1

ResizeObserver 的行为只有重新创建该构造函数才能修改。只限制传递给该构造函数的回调函数确实会更简单。
为了演示这个，这里有一个 textarea元素，默认情况下可以交互调整大小。处理程序将更改文本区域的背景颜色，但前提是在最后一个事件之后经过 1 秒。为此，处理程序被包装在对 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>