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
回调函数被频繁调用,超过浏览器的处理能力。
![](https://i-blog.csdnimg.cn/direct/049397c7c6e94bcaa6ea10c2f7d9ff8b.png)
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);
}
}
把上面代码粘在app.vue
或者main.js中都可以