ResizeObserver回调参数解析：能否通过最后一个元素获取最终尺寸？

你的这个理解不完全准确，得结合实际使用场景来看：

• 首先，ResizeObserver回调里的entries数组，装的是本次触发周期内所有尺寸发生变化的被监听元素对应的ResizeObserverEntry对象，每个对象都是对应元素的最新尺寸状态。
• 如果同时监听多个元素，entries里会有多个元素，分别对应每个尺寸变化的元素。这时候只取数组最后一个，拿到的是最后那个发生变化的元素的尺寸，而不是你关心的目标元素的，肯定会出错。
• 哪怕只监听单个元素，虽然大部分浏览器场景下entries里只有一个元素，取最后一个能正常工作，但这属于“碰运气”——规范里并没有保证单次回调里同一个元素不会出现多个entry（虽然实际很少发生）。

正确的做法应该是根据元素的target属性，筛选出你真正关心的那个元素的entry，比如：

// 假设你预先定义了要监听的目标元素targetElement
const resizeObserver = new ResizeObserver(entries => {
  const targetEntry = entries.find(entry => entry.target === targetElement);
  if (targetEntry) {
    const finalBoxSize = targetEntry.contentBoxSize;
    console.log(finalBoxSize);
  }
});

这样不管是监听单个还是多个元素，都能准确拿到目标元素的最终尺寸，符合API的设计逻辑。

内容的提问来源于stack exchange，提问作者doberkofler