Actualmente uso un ResizeObserver para ver el tamaño de un elemento, pero estaba pensando en usar un acelerador (el acelerador de lodash) para aumentar su rendimiento.
const myResize = new ResizeObserver((entries) => { const el = document.querySelector('#foo'); // get boundingRect and adjust height }); let imageToWatch = document.querySelector('.image'); myResize.observe(imageToWatch); ¿Hay alguna manera de throttle esto? ¿Estaría el acelerador en la lógica dentro myResize ? Sin embargo, supongo que no puedo acelerar la parte de observe de esto.
El comportamiento de ResizeObserver solo podría modificarse si recreara ese constructor. De hecho, será más sencillo acelerar la función de devolución de llamada que pasa a ese constructor.
Para una demostración de esto, aquí hay un textarea de área de texto, que por defecto se puede cambiar de tamaño de forma interactiva. El controlador cambiará el color de fondo del área de texto, pero solo si pasó 1 segundo después del último evento. Para este propósito, el controlador está envuelto en una llamada a 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>