Javascript ResizeObserver 意外触发

Question

为什么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;

Answer 1

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

\n

我检查了规格，它说：

\n

\n

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

\n

\n

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

\n

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

\n

let entriesSeen = new Set(); // set of entries to skip initial resize call\n\nconst obs = new ResizeObserver((entries) => {\n    for (let entry of entries) {\n        if (!entriesSeen.has(entry.target)) {\n            // do nothing during initial call\n            // just mark element as seen\n            entriesSeen.add(entry.target);\n        } else {\n            console.log(\'resize detected\');\n            console.log(entry.target);\n        }\n    }\n});\n\nobs.observe(someElement);\n

\n