使用 ResizeObserver监听多个 DOM 元素

可以使用 ResizeObserver 的实例来监听多个 DOM 元素的变化。首先，创建一个 ResizeObserver 的实例，然后使用该实例的observe()方法来观察每个需要监听的 DOM 元素。

下面是一个示例代码，可以监听多个 DOM 元素的变化：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const target = entry.target;
    const width = target.clientWidth;
    const height = target.clientHeight;
    console.log(`${target.id} resized to ${width}x${height}`);
  }
});

// 监听多个 DOM 元素
const elements = document.querySelectorAll('.resize');
elements.forEach(element => {
  observer.observe(element);
});

在这个示例中，我们首先创建了一个 ResizeObserver 的实例，然后使用该实例的observe()方法来观察多个需要监听的 DOM 元素。每当一个元素的大小发生变化时，ResizeObserver 的回调函数就会被调用，我们可以在其中获取元素的新宽度和高度，并进行相应的处理。

相关问题

ResizeObserver同时监听多个 dom

是的，ResizeObserver可以同时监听多个DOM元素。您可以通过以下两种方法来实现：

1. 实例化多个ResizeObserver对象，每个对象监听一个DOM元素。

const observer1 = new ResizeObserver(entries => {
  // 处理第一个DOM元素的变化
});

const observer2 = new ResizeObserver(entries => {
  // 处理第二个DOM元素的变化
});

observer1.observe(document.getElementById('element1'));
observer2.observe(document.getElementById('element2'));

2. 为ResizeObserver对象添加多个监听器，每个监听器监听一个DOM元素。

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    if (entry.target.id === 'element1') {
      // 处理第一个DOM元素的变化
    } else if (entry.target.id === 'element2') {
      // 处理第二个DOM元素的变化
    }
  });
});

observer.observe(document.getElementById('element1'));
observer.observe(document.getElementById('element2'));

无论您选择哪种方法，都可以同时监听多个DOM元素的变化。

ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

这个错误通常发生在使用 `ResizeObserver` API 监听 DOM 元素尺寸变化时，由于多次修改元素大小导致 `ResizeObserver` 进入了死循环，从而触发了 Chrome 浏览器的保护机制，导致页面崩溃。

解决此问题的方法是合理使用 `ResizeObserver` API，避免频繁修改元素大小，或者手动清除观察者，以避免进入死循环。此外，也可以考虑使用其他的元素尺寸变化监听方法，比如 `window.onresize` 事件。