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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 应用加固与重签名—使用AndroidStudio自带工具 apksigner

由 AndroidStudio 生成的release版本的app有自己的签名,但当应用加固后会删除原签名,需要重新签名。 一、加固方式: 使用基础版的腾讯云(乐固)进行免费加固,上传软件后等待在线加固完成后下载 apk 即可。…

vue3+ts+vite集成eslint

项目中安装eslint yarn add eslint -Deslint初始化 npx eslint --init按照下方操作即可 安装typescript-eslint/parser yarn add typescript-eslint/parser -D安装vite-plugin-eslint2 yarn add vite-plugin-eslint2 -D配置vite-plugin-eslint2 // vite.config.ts import …

钡铼技术BL104在环境监测站多协议采集保障数据全面准确

随着工业化和城市化进程的加快,环境污染问题日益严重,环境监测站在保护生态环境、保障公众健康中的作用变得越来越重要。钡铼技术PLC物联网关BL104,为环境监测站提供了一种高效、可靠的多协议数据采集解决方案,保障了监测数据的全…

如何实现对文件发送全生命周期的外发管理?

在日常工作中,我们需要经常和企业外部的机构或者个人,发送一些企业内部的文档或者图纸等资料。但企业在文件外发管理上,仍存在一定漏洞,有些员工会通过一些手段,将重要核心文件数据发过去,包括但不仅限于以…

【数据结构(邓俊辉)学习笔记】二叉搜索树02——查找、插入和删除

文章目录 1.概述2. 查找2.1 查找:算法2.2 查找:理解2.3 查找:实现2.4 查找:语义 3. 插入3.1 插入:算法3.2 插入:实现 4. 删除4.1 删除:框架4.2 删除:单分支4.3 删除:双分…

MySQL----redo log重做日志原理及流程

重做日志 redo log:重做日志,用于记录事务操作的变化,确保事务的持久性。redo log是在事务开始后就开始记录,不管事务是否提交都会记录下来,在异常发生时(如数据持久化过程中掉电),…

笔记-python里面的xlrd模块详解

那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模块? ♦python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel&…

成都百洲文化传媒有限公司助力商家扬帆远航

在数字经济的浪潮中,电商行业如日中天,成都百洲文化传媒有限公司正是这一领域的佼佼者。作为一家专注于电商服务的传媒公司,百洲文化以其专业的服务、创新的理念和卓越的成果,在业内树立了良好的口碑,成为众多商家信赖…

大数据实训室建设可行性报告

一、建设大数据实训室的背景与意义 随着信息技术的飞速发展,大数据已成为推动社会进步和经济发展的重要力量。中高职院校作为技能型人才培养的摇篮,承担着为社会输送大数据领域高素质、高技能人才的重要任务。因此,建设大数据实训室&#xf…

OKR:2024年目标和关键成果常见问题

什么是目标和关键结果(OKR)? 目标和关键结果(#OKR#)是一种由结果驱动的目标制定方法。在企业中,OKR经常被用来指导基于结果的成功。使用结果而不是任务作为驱动力,OKRs 鼓励通过度量指标对实现成…

Android 查询及获取应用程序 Package 及 Acticity 名称的方法

一、通过命令查询和获取应用的Package及Acticity (一)通过命令查询应用包名及安装信息 以下是常用命令: 命令形式作用adb shell pm list packages查询系统中所有应用的包名adb shell pm list packages -s查询系统应用包名adb shell pm lis…

onnx进阶算子优化

一、定义 如何保证pytorch 模型顺利转为onnx. 前言pytorch 算子是如何与onnx 算子对齐的?Asinh 算子出现于第 9 个 ONNX 算子集。PyTorch 在 9 号版本的符号表文件中是怎样支持这个算子的?BitShift 算子出现于第11个 ONNX 算子集。PyTorch 在 11 号版本…

Harbor本地仓库搭建004_Harbor配置管理功能_分布式分发功能_仓库管理_用户管理_垃圾清理_审查服务_项目定额---分布式云原生部署架构搭建00

然后我们再看一下配置管理,这里主要有个认证模式 这里我们是数据库,其实就是我们安装的postgresql 可以看到还有LDAP对吧,这个其实就是自己公司如果有 LDAP服务器,那么可以对接过来,那么,这个时候 再登录harbor的时候,就可以直接使用公司的,LDAP来管理,所有的用户了,其实就是…

电脑桌面图标大小怎么调整?多种方法图文教程【全】

随着数字化生活的深入,电脑桌面图标的大小调整成为了我们日常使用中经常需要面对的问题。无论是为了更清晰地查看文件内容,还是为了美化桌面布局,掌握调整图标大小的方法都显得尤为重要。电脑桌面图标大小怎么调整?本文将为您提供…

为什么要选择华为 HCIE-Security 课程?

2020 年我国网络安全市场规模达到 680 亿元,同比增长 25%。随着对网络安全的愈加重视及布局,市场规模将持续扩大。 近年来,随着“云大物工移智”等新兴技术的快速发展和普及应用,数字化已经融入社会经济生活的方方面面&#xff0c…

Golang 依赖注入库Wire应用案例

文章目录 简介Github指南安装案例wire.NewSetwire.Buildwire.Bindwire.Structwire.Valuewire.InterfaceValue 简介 Go语言的依赖注入库Wire是由Google提供的一个代码生成工具,用于简化和自动化依赖注入过程。Wire主要通过生成代码来处理依赖关系,而不是…

java-SpringBoot执行定时任务-任务调度-@EnableScheduling和@Scheduled

文章目录 java借助springBoot框架,执行定时任务0. 项目地址1. 需求分析2、新建springBoot项目3. 编写定时任务3.1 开启调度任务3.2 编写定时任务方法 java借助springBoot框架,执行定时任务 0. 项目地址 https://github.com/OrangeHza/JavaDemo 1. 需求…

揭示西周与汉唐时期的纺织工艺

在中国新疆这片充满神秘色彩的土地上,每一次的考古发掘都仿佛是对历史的一次深情回望,揭示出中华民族悠久而灿烂的文明史。其中,新疆出土的西周和汉唐时期的织物,更是以其精美绝伦的工艺和独特的审美风格,让我们对古代…

加速Python库安装:一键切换pip源,提升下载速度与成功率

pip换源 一、为什么要换源二、如何换源1. 临时换源2. 永久换源Windows系统Linux和macOS系统 3. 使用镜像站工具 三、常见的国内源四、注意事项五、总结 在Python开发中,我们经常需要使用pip来安装各种库。然而,由于网络环境的原因,直接使用pi…

《山西教育》教学版是什么级别的刊物?

《山西教育》教学版是什么级别的刊物? 《山西教育(教学版)》创刊于1956年,是由山西教育报刊社主办的教学刊物。山西省一级期刊,是“宣传教育政策,关注教育热点,传播先进经验,提供教改资讯”的权威性期刊&a…