ResizeObserver loop completed with undelivered notifications

项目报错

Uncaught runtime errors: ERROR ResizeObserver loop completed with undelivered notifications. 

handleError@webpack-internal:///./node_modules/.store/webpack-dev-server@4.15.2/node_modules/webpack-dev-server/client/overlay.js:307:58 

createOverlay/<@webpack-internal:///./node_modules/.store/webpack-dev-server@4.15.2/node_modules/webpack-dev-server/client/overlay.js:326:18

这个错误是浏览器内部机制产生的无害警告，不是代码问题，也不会影响程序功能。我来用最简单直白的方式解释：

---

​通俗解释​

1. ​什么是 ResizeObserver？​​
   这是浏览器用来监听元素尺寸变化的工具（比如你拖动窗口大小时，页面布局要跟着调整）。

2. ​为什么会报错？​​
   当页面布局变化太快（比如表格、弹窗等组件在调整尺寸时），浏览器为了防止无限循环，会主动终止监听并抛出这个提示。

3. ​为什么说可以忽略？​​

   • 这只是浏览器的安全机制提醒
   • 实际功能已经正常执行完了
   • 几乎所有用 Element UI/Element Plus 的项目都会看到这个提示

解决方案：

App.vue中添加

// 解决ERROR ResizeObserver loop completed with undelivered notifications.
const _ResizeObserver = window.ResizeObserver

window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  // eslint-disable-next-line
  constructor(callback) {
    callback = debounce(callback, 16)

    super(callback)
  }
}

下面是对这个代码的解释：

首先，debounce函数用于限制一个函数的执行频率，确保在一定时间间隔内只执行一次。它接受两个参数，一个是要执行的函数fn，另一个是延迟时间delay。函数内部使用setTimeout来实现延迟执行，每次调用时会清除之前的定时器，然后设置一个新的定时器来延迟执行目标函数。

接下来，代码对window.ResizeObserver进行了扩展。它将原始的ResizeObserver保存为_ResizeObserver，然后定义了一个新的ResizeObserver类，重写了其构造函数。在新的构造函数中，传入的回调函数被用debounce函数处理，确保回调函数在16毫秒的间隔内执行一次。这样做是为了限制ResizeObserver的回调频率，以避免过多的触发，提高性能。

这段代码实现了对ResizeObserver的改写，通过限制回调函数的执行频率来优化性能。

通过调整回调频率能解决上面讲解的问题报错原因。

转自【Bug】ERROR ResizeObserver loop completed with undelivered notifications.-阿里云开发者社区