Javascript ResizeObserver 意外触发

Why the ResizeObserver类总是首先执行处理程序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;

在不同的浏览器中进行测试，报告的行为是一致的 - 观察者回调被调用时observer()叫做。

我已经检查过规格 https://drafts.csswg.org/resize-observer/#intro， 它说：

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

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

每个元素都可以添加到Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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);