当前位置：首页 > article >正文

element-plus 报错 ResizeObserver loop limit exceeded 解决

article 2024/11/18 21:25:33

`ResizeObserver loop limit exceeded` 是一个常见的浏览器控制台警告，通常在使用 `ResizeObserver` API 时触发。对于使用 Element Plus 的 Vue 3 项目，这个错误可能会影响组件的正常渲染和功能。下面将详细解释这个错误的原因以及如何解决它。

错误原因

1. ResizeObserver 的工作原理

`ResizeObserver` 是一个用于监听 DOM 元素大小变化的 API。当被观察的元素尺寸发生变化时，`ResizeObserver` 会触发回调函数。在 Element Plus 中，许多组件依赖 `ResizeObserver` 来自动调整大小和布局。

2. 循环触发

`ResizeObserver loop limit exceeded` 错误通常是由于以下原因引起的：

无限循环更新：在 ResizeObserver 的回调函数中对 DOM 进行修改，导致再次触发尺寸变化，进而再次调用回调函数，如此反复，超出了浏览器设定的循环限制。
频繁触发变化：快速连续的尺寸变化（例如窗口大小频繁调整）可能导致 ResizeObserver 回调函数被频繁调用，超过浏览器的处理能力。

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);
  }
}

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