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

通过防抖动代码解决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)。
    • 构造函数
      • 接受 callbackoptions 作为参数。
      • 在构造函数内部,使用 debounce 函数将 callback 函数包装,并设置了 100 毫秒的延迟。
      • super() 方法调用 NativeResizeObserver 的构造函数,并传入经过防抖处理的 debouncedCallbackoptions
  • 使用方法

    • 将默认的 ResizeObserver 替换为 DebouncedResizeObserver。现在,每当创建一个 new ResizeObserver(callback) 时,它都会在触发回调之前自动对其进行防抖处理。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

和烨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值