通过防抖动代码解决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 毫秒)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows桌面运维----第三天

1、电脑存储位置更改: 操作方式:使用win I打开系统设置 → 系统 → 存储选项卡 → 更改新内容的保存位置; 2、开启存储感知:自动清理临时文件 操作方式:右键开始图标(左下角)➡ 系统 ➡ 存储…

每天一个数据分析题(三百七十六)- 时间序列

影响时间序列的因素不包括以下哪个? A. 季节变动 B. 循环波动 C. 不规则波动 D. 有效性 数据分析认证考试介绍:点击进入 题目来源于CDA模拟题库 点击此处获取答案

DevOps学习回顾01-技能发展路线-岗位能力-体系认知

事为先,人为重–事在人为 参考来源: 极客时间专栏:DevOps实战笔记,作者:石雪峰 课程链接:https://time.geekbang.org/column/intro/235 时代的典型特征 VUCA VUCA 是指易变性(Volatility&…

破局者:Codebeamer如何打破传统束缚,开启工程新纪元

飞速发展的数字时代,一场深刻的数字化革命正在重塑各行各业的价值链条,为产品开发组织带来了前所未有的挑战。随着电子技术和软件组件在产品设计中的地位日益凸显,传统的工程实践正经历着一场深刻的变革。为了顺应这一潮流,企业必…

【碳排放控排1006】碳排放控排企业名单数据集,探索绿色生产!

今天给大家分享的是国内顶级期刊2023发表论文《碳排放规制、企业减排激励与全要素生产率——基于中国碳排放权交易机制的准自然实验》中使用到的重要数据集——碳排放控排企业名单,该论文从企业生产效率视角对论文进行研究,发现碳排放权交易机制显著提升…

植物大战僵尸杂交版V2.1快速刷金币的方法(新号适用,无需自带招财猫)

📝个人主页:哈__ 期待您的关注 目录 1. 💻游戏介绍 2. 🔥快速刷取金币的办法(我是新号测试的) 2.1 无招财猫 2.2 有招财猫 《植物大战僵尸杂交版》是一款在原版《植物大战僵尸》基础上进行了创新的塔防…

骗小孩背单词的游戏

我小孩还没有生,我打算生2个,这样他们有竞争性。我们小时候玩过一款游戏,叫做编编战,就是通过作者进行现场在脑子里编故事,然后玩家,直接加入故事,通过讲述或者演绎,来做凭空的角色扮…

Java学习【深入解读File类:从基础到高级的完整指南】

Java学习【深入解读File类:从基础到高级的完整指南】 ⭐File的概述和构造方法⭐File常见的成员方法🌙构造方法🌙length()🌙getAbsoluteFile()和getPath()🌙getName()和lastModified() ⭐文件的创建和删除⭐获取并遍历 …

【OpenHarmony开发】 tracepoint的机制总结

一、tracepoint 的机制 1.1 DECLARE_HOOK 解析 DECLARE_HOOK(vendor_bond_check_dev_link,TP_PROTO(const struct bonding *bond, const struct slave *slave, int *state), TP_ARGS(bond, slave, state)); ​ // 在已经实现如下宏定义的前提下 // CONFIG_TRACEPOINTS 和 CO…

代码随想录算法训练营DAY41|背包问题 二维 、背包问题 一维、416. 分割等和子集

背包问题 二维 题目链接:背包问题 二维 def bag_weight_problem(n,space,weight,value):dp [[0 for i in range(space1)]for j in range(n)]for i in range(weight[0], space1):dp[0][i]value[0]for j in range(1, n):for k in range(space1):if weight[j]>k:…

力扣410.分割数组的最大值

力扣410.分割数组的最大值 分割数组 使得子数组最大值最小 凡是最小化最大值和最大化最小值的题都是二分答案二分子数组最大值 求当前数组可以分为几段 class Solution {public:int splitArray(vector<int>& nums, int k) {auto check [&](int mid) -> bo…

Leetcode Hot 100 刷题记录 - Day 1

问题描述&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 示…

AbMole带你探索颅内压力与肌肉生长的联系:一项突破性研究

在生物医学领域&#xff0c;颅内压力&#xff08;ICP&#xff09;的调控机制一直是研究的热点。最近&#xff0c;一项发表在《PLOS ONE》上的研究为我们揭示了颅内压力与后颅窝肌肉生长之间的潜在联系&#xff0c;为我们理解某些慢性头痛的成因提供了新的视角。 颅内压力的异常…

spring-boot-starter-websocket 客户端 服务端 例子

1. 添加依赖 首先&#xff0c;在pom.xml中添加spring-boot-starter-websocket依赖&#xff0c;正如你已经指出的&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId&g…

QEMU(Quick EMUlator)学习

QEMU介绍 QEMU (Quick EMUlator) 是一个开源的虚拟化软件和硬件仿真器&#xff0c;它能实现完整系统仿真或进程级仿真。QEMU 的用途广泛&#xff0c;可以用来运行不同体系结构的程序&#xff0c;测试操作系统和驱动程序&#xff0c;开发嵌入式系统&#xff0c;甚至作为云计算平…

temu跨境选品师是怎么样的一个项目?

TEMU(特穆)跨境选品师项目&#xff0c;作为一项创新的全球商品采购和选品服务&#xff0c;正在逐步改变消费者对于跨境电商产品的认知和选择方式。这个项目不仅仅是一个简单的商品推荐平台&#xff0c;更是一种以数据驱动的精准选品策略的体现&#xff0c;为消费者提供了全新的…

Spring Boot集成vavr快速入门demo

1.什么是vavr&#xff1f; 初闻vavr&#xff0c;感觉很奇怪&#xff0c;咋这个名字&#xff0c;后面看到它的官网我沉默了&#xff0c;怀疑初创团队付费资讯了UC震惊部如何取名字&#xff0c;好家伙&#xff0c;vavr就是java这四个字倒过来&#xff0c;真的是’颠覆’了java……

为什么Mid journey很容易就能做出很有氛围感的图而SD却容易做图很丑?

前言 6月12日&#xff0c;Midjourney更新了一项新的功能——模型个性化&#xff0c;这一项功能最重要的作用就是能够让生成的图像更加符合你自己的审美标准。就像每个艺术家都有自己的独特风格一样&#xff0c;有了这项模型个性化功能的加持&#xff0c;每个人都能生成具有鲜明…

松弛变量(slack variable)与拉格朗日对偶

松弛变量&#xff08;slack variables&#xff09;和拉格朗日对偶&#xff08;Lagrangian duality&#xff09;是优化理论中的两个重要概念&#xff0c;它们之间有着密切的关系&#xff0c;特别是在线性规划和凸优化中。 松弛变量 松弛变量用于将不等式约束转化为等式约束。在…

kali系统几个开机启动项的区别

1、Live system (amd64) 简单的模式 &#xff0c;启动系统&#xff0c;直接进入 Kali&#xff0c;在系统中的所有的操作和设置都会在下次重启时失效。 Kali 中保存/编辑的所有东西都会重启丢失。 2、Live system (amd64 fail-safe mode) 这种模式与 Live (amd64) 类似&#xf…