【Bug】ERROR ResizeObserver loop completed with undelivered notifications.

王同学要努力2023-10-17 16:14

【Bug】ERROR ResizeObserver loop completed with undelivered notifications.

报错如下：

bash 复制代码

ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。

解决方案：
在App.vue文件中添加以下代码：

bash 复制代码

<script >
// 解决ERROR ResizeObserver loop completed with undelivered notifications.

//问题的

const debounce = (fn, delay) => {
  let timer = null;

  return function () {
    let context = this;

    let args = arguments;

    clearTimeout(timer);

    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

// 解决ERROR ResizeObserver loop completed with undelivered notifications.

const _ResizeObserver = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);

    super(callback);
  }
};
</script>

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

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

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

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

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