Javascript ResizeObserver 被意外触发

Question

为什么ResizeObserver class 总是在第一个observe()执行处理程序？

尝试在 Chrome 的开发工具上执行以下代码：

(new ResizeObserver(() => console.log('resize detected'))).observe($0)

即使您没有进行任何大小更改，您也会在应用后立即看到打印的日志。

我需要仅在调整大小时执行处理程序的调整大小观察者。
是否有任何黑客/选项来调整它？

let disableObserver = false;

const obs = new ResizeObserver(() => {
   if (!disableObserver) {
      console.log('resize detected');
   }
});

// the hack below doesn't work:
disableObserver = true;
obs.observe(someElement);
disableObserver = false;

Answer 1

在不同的浏览器中测试并且报告的行为是一致的 - 当调用observer()时调用观察者回调。

我检查了规范，它说：

• 当观察到的元素从 DOM 中插入/删除时，观察将触发。
• 当观察元素显示设置为无时，观察将触发。
• 未替换的内联元素不会触发观察。
• CSS 转换不会触发观察。
• 如果正在渲染元素并且元素的大小不是 0,0，则观察将在观察开始时触发。

我猜最初的调用是因为元素被渲染。

每个元素都可以添加到Set以跳过初始调用。 像这样的东西：

let entriesSeen = new Set(); // set of entries to skip initial resize call

const obs = new ResizeObserver((entries) => {
    for (let entry of entries) {
        if (!entriesSeen.has(entry.target)) {
            // do nothing during initial call
            // just mark element as seen
            entriesSeen.add(entry.target);
        } else {
            console.log('resize detected');
            console.log(entry.target);
        }
    }
});

obs.observe(someElement);