ResizeObserver loop completed with undelivered notifications. 报错

news/2024/9/20 17:25:33/文章来源:https://www.cnblogs.com/beileixinqing/p/18422900

js 使用 ResizeObserver 时报错,代码实现逻辑如下:

function observeVideoDom (width: number, height: number) {const videoDom = document.getElementById('videoDom')if (!videoDom) returnif (window.ResizeObserver) {// ResizeObserver 在 iOS13.4及以上,安卓 4.4.5及以上才支持,如果不支持用轮询判断const resizeObserver = new ResizeObserver(() => {videoSizeReset(width, height)})resizeObserver.observe(videoDom)} else {let previousWidth = videoDom.clientWidthlet previousHeight = videoDom.clientHeightconst checkSize = () => {const currentWidth = videoDom.clientWidthconst currentHeight = videoDom.clientHeightif (currentWidth !== previousWidth || currentHeight !== previousHeight) {videoSizeReset(width, height)previousWidth = currentWidthpreviousHeight = currentHeight}}const scheduleCheck = () => {checkSize()requestAnimationFrame(scheduleCheck)}requestAnimationFrame(scheduleCheck)}}

主要功能是监测  videoDom 元素的盒子大小变化后,重新赋值videoDom 元素的盒子大小,由于重新赋值的操作会再次改变 videoDom 元素的盒子大小,会导致报错了 ResizeObserver loop completed with undelivered notifications. 

解决方案,给  ResizeObserver 的回调函数加 防抖或者  requestAnimationFrame

改后如下:

function observeVideoNativeDom (width: number, height: number) {const videoNativeDom = document.getElementById('video-native')if (!videoNativeDom) returnif (window.ResizeObserver) {// ResizeObserver 在 iOS13.4及以上,安卓 4.4.5及以上才支持,如果不支持用轮询判断const resizeObserver = new ResizeObserver(debounce(() => {videoSizeReset(width, height)}))resizeObserver.observe(videoNativeDom)} else {let previousWidth = videoNativeDom.clientWidthlet previousHeight = videoNativeDom.clientHeightconst checkSize = () => {const currentWidth = videoNativeDom.clientWidthconst currentHeight = videoNativeDom.clientHeightif (currentWidth !== previousWidth || currentHeight !== previousHeight) {videoSizeReset(width, height)previousWidth = currentWidthpreviousHeight = currentHeight}}const scheduleCheck = () => {checkSize()requestAnimationFrame(scheduleCheck)}requestAnimationFrame(scheduleCheck)}}
// 或者

 

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

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

相关文章

2024-09-20 如何去除vue前端框架upload组件中的缓存 ==》v-if+setTimeout

在很多前端框架中的upload组件,比如arco-design的a-upload组件,在遍历渲染过程中会发现上传完成后,切换到另一个a-upload组件,它的图片会显示上一个a-upload组件的缓存 正常上传,然后点击红色,红色对应的图片应该被清空,实际上却并没有,如下解决方案:给a-upload组件加…

【python爬虫案例】利用python爬取豆瓣读书评分TOP250排行数据

【python爬虫案例】利用python爬取豆瓣电影TOP250评分排行数据,并导出为excel文档数据一、爬取案例-豆瓣读书TOP250 上一期给大家分享了个python爬虫案例:豆瓣电影TOP250的排行榜数据爬取 【python爬虫案例】利用python爬虫爬取豆瓣电影评分TOP250排行数据! 今天再给大家分享…

多语言长文本 AI 关键字提取 API 数据接口

多语言长文本 AI 关键字提取 API 数据接口 AI / 文本 专有模型极速提取 多语言长文本 / 实时语料库。1. 产品功能支持长文本关键词提取; 多语言关键词识别; 基于 AI 模型,提取精准关键词; 全接口支持 HTTPS(TLS v1.0 / v1.1 / v1.2 / v1.3); 全面兼容 Apple ATS; 全国多…

【Swagger】3.Swagger2的权限控制

想找Swagger的登录认证方式。这里是Swagger2的方式。登录安全控制 Basic身份认证 ApiKey身份认证登录安全控制 Basic身份认证ApiKey身份认证 有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。

Oracle 19C重启库后警告日志报错ORA-12012ORA-27476: SYS.MAX_JOB_SLAVE_PROCESSES does not exist

Oracle 19C重启库后警告日志报错ORA-12012&&ORA-27476: "SYS"."MAX_JOB_SLAVE_PROCESSES" does not exist某次测试机器的19c重启后突然在警告日志定时冒出如下类似的报错:2024-09-20T15:20:00.170202+08:00 TESTDB(7):Errors in file /u01/app/or…

【Swagger】2.不在生产环境暴露,可以修改默认地址

不对外暴露接口 一般来说,接口给内部人员使用和测试的,不对生产环境暴露。此时应该如何设置呢?可以在Swagger配置文件中添加注解:@Profile({"环境名称1","环境名称2"} 或@Profile("环境名称") 这里,注解中不添加生产环境。 此时,开发环境和…

SMT丨工艺特点及详细生产工艺流程

SMT丨工艺特点及详细生产工艺流程 表面组装技术SMT现状 SMT是目前电子组装行业里最流行的一种技术和工艺。自70年代初推向市场以来,SMT已逐渐替代传统"人工插件"的波峰焊组装方式,已成为现代电子组装产业的主流,人们称为电子组装技术的第二次革命。在国际上,这种…

【Swagger】2.——不在生产环境暴露,可以修改默认地址

不对外暴露接口 一般来说,接口给内部人员使用和测试的,不对生产环境暴露。此时应该如何设置呢?可以在Swagger配置文件中添加注解:@Profile({"环境名称1","环境名称2"} 或@Profile("环境名称") 这里,注解中不添加生产环境。 此时,开发环境和…

文件上传漏洞思路详解

1. 文件上传漏洞简介 1.1 什么是文件上传漏洞 文件上传漏洞是一种常见的Web应用程序漏洞,攻击者可以通过向目标服务器上传恶意文件来实现攻击目的。这类漏洞的产生通常是因为服务器没有对用户上传的文件进行充分的安全检查和验证。 1.2 文件上传漏洞有哪些危害 1. 恶意代码执行…

信息学奥赛初赛天天练-93-CSP-S2023阅读程序3-sort排序、同底对数求和、二分查找、二分答案

2023 CSP-S 阅读程序2 判断题正确填 √,错误填 ⨉ ;除特殊说明外,判断题 1.5 分,选择题 3 分,共计 40 分) 01 #include <vector> 02 #include <algorithm> 03 #include <iostream> 04 05 using namespace std; 06 07 bool f0(vector<int> &a…

缓存

Django4中的缓存 详细文档参考:https://www.cnblogs.com/Neeo/articles/17589834.html Django支持的缓存有好几种:三方的Redis(推荐),Memcached(不推荐) 缓存到本地文件 缓存到本地数据库 缓存到内存里 虚拟缓存缓存的粒度 局部视图缓存 缓存指定的视图函数,有两种写法.在视…

VSCode 定义代码模板

在使用编写代码的过程中,经常会写一些固定代码段。 以 Java 为例,定义实体类时一般都会编写序列化版本号: @Serial private static final long serialVersionUID = 1L;这段代码是固定写法,基本不会变,如果每次都手写的话,就比较繁琐了。 VSCode 提供了生成代码段的功能,…