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

---

一、报错内容

我通过el-tabs下的el-tab-pane切换到el-table出现的报错，大致是渲染宽度出现了问题

二、解决方案

扩展原生的 ResizeObserver 类，并在其回调函数上应用防抖功能。

1. 导入 debounce 函数：确保从 lodash 中正确导入 debounce 函数。假设的导入语句是正确的 (import { debounce } from "lodash";)，则可以正确使用 lodash 提供的防抖函数。

2. 正确应用防抖：在构造函数中，试图对回调函数应用防抖是正确的做法。但是，由于 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) 时，它都会在触发回调之前自动对其进行防抖处理。

这种设置确保 ResizeObserver 的回调函数在触发之前经过防抖处理，以避免由频繁触发 resize 事件引起的性能问题。可以根据具体需求调整防抖的延迟时间（本例中为 100 毫秒）。