通过防抖动代码解决ResizeObserver loop completed with undelivered notifications.
- 一、报错内容
- 二、解决方案
- 解释:
一、报错内容
我通过el-tabs下的el-tab-pane切换到el-table出现的报错,大致是渲染宽度出现了问题
二、解决方案
扩展原生的 ResizeObserver
类,并在其回调函数上应用防抖功能。
-
导入
debounce
函数:确保从 lodash 中正确导入debounce
函数。假设的导入语句是正确的 (import { debounce } from "lodash";
),则可以正确使用 lodash 提供的防抖函数。 -
正确应用防抖:在构造函数中,试图对回调函数应用防抖是正确的做法。但是,由于
super()
调用父类构造函数的方式,可能需要稍作调整以确保其正确工作。
这里是后的代码示例,正确地将防抖应用到 ResizeObserver
的回调函数中:
import { debounce } from "lodash";
const NativeResizeObserver = window.ResizeObserver;
class DebouncedResizeObserver extends NativeResizeObserver {
constructor(callback, options) {
const debouncedCallback = debounce(entries => {
callback(entries);
}, 100);
super(debouncedCallback, options);
}
}
window.ResizeObserver = DebouncedResizeObserver;
解释:
-
导入语句:确保
import { debounce } from "lodash";
在代码片段之前正确地导入了 lodash 的 debounce 函数(如果使用的是 ES 模块)。 -
类定义:
- DebouncedResizeObserver:这是一个新的类,扩展自
NativeResizeObserver
(原生的ResizeObserver
)。 - 构造函数:
- 接受
callback
和options
作为参数。 - 在构造函数内部,使用
debounce
函数将callback
函数包装,并设置了 100 毫秒的延迟。 super()
方法调用NativeResizeObserver
的构造函数,并传入经过防抖处理的debouncedCallback
和options
。
- 接受
- DebouncedResizeObserver:这是一个新的类,扩展自
-
使用方法:
- 将默认的
ResizeObserver
替换为DebouncedResizeObserver
。现在,每当创建一个new ResizeObserver(callback)
时,它都会在触发回调之前自动对其进行防抖处理。
- 将默认的
这种设置确保 ResizeObserver
的回调函数在触发之前经过防抖处理,以避免由频繁触发 resize 事件引起的性能问题。可以根据具体需求调整防抖的延迟时间(本例中为 100 毫秒)。