通过防抖动代码解决ResizeObserver loop completed with undelivered notifications.

news2024/9/20 1:17:31

通过防抖动代码解决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。
使用方法：
- 将默认的 ResizeObserver 替换为 DebouncedResizeObserver。现在，每当创建一个 new ResizeObserver(callback) 时，它都会在触发回调之前自动对其进行防抖处理。