首页 > 其他分享 >ResizeObserver loop completed with undelivered notifications. 报错

ResizeObserver loop completed with undelivered notifications. 报错

时间:2024-09-20 17:25:07浏览次数:1  
标签:const previousHeight completed undelivered scheduleCheck 报错 ResizeObserver video

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

function observeVideoDom (width: number, height: number) {
    const videoDom = document.getElementById('videoDom')
    if (!videoDom) return
    if (window.ResizeObserver) {
      // ResizeObserver 在 iOS13.4及以上,安卓 4.4.5及以上才支持,如果不支持用轮询判断
      const resizeObserver = new ResizeObserver(() => {
        videoSizeReset(width, height)
      })
      resizeObserver.observe(videoDom)
    } else {
      let previousWidth = videoDom.clientWidth
      let previousHeight = videoDom.clientHeight
      const checkSize = () => {
        const currentWidth = videoDom.clientWidth
        const currentHeight = videoDom.clientHeight
        if (currentWidth !== previousWidth || currentHeight !== previousHeight) {
          videoSizeReset(width, height)
          previousWidth = currentWidth
          previousHeight = 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) return
    if (window.ResizeObserver) {
      // ResizeObserver 在 iOS13.4及以上,安卓 4.4.5及以上才支持,如果不支持用轮询判断
      const resizeObserver = new ResizeObserver(debounce(() => {
        videoSizeReset(width, height)
      }))
      resizeObserver.observe(videoNativeDom)
    } else {
      let previousWidth = videoNativeDom.clientWidth
      let previousHeight = videoNativeDom.clientHeight
      const checkSize = () => {
        const currentWidth = videoNativeDom.clientWidth
        const currentHeight = videoNativeDom.clientHeight
        if (currentWidth !== previousWidth || currentHeight !== previousHeight) {
          videoSizeReset(width, height)
          previousWidth = currentWidth
          previousHeight = currentHeight
        }
      }
      const scheduleCheck = () => {
        checkSize()
        requestAnimationFrame(scheduleCheck)
      }
      requestAnimationFrame(scheduleCheck)
    }
  }
// 或者

 

标签:const,previousHeight,completed,undelivered,scheduleCheck,报错,ResizeObserver,video
From: https://www.cnblogs.com/beileixinqing/p/18422900

相关文章

  • 视频存储EasyCVR视频监控汇聚管理平台设备录像下载报错404是什么原因?
    EasyCVR视频监控汇聚管理平台是一款针对大中型项目设计的跨区域网络化视频监控集中管理平台。该平台不仅具备视频资源管理、设备管理、用户管理、运维管理和安全管理等功能,还支持多种主流标准协议,如GB28181、RTSP/Onvif、RTMP、部标JT808、GA/T1400协议等,以及支持厂家的私有协议......
  • 云服务器异常报错类型及处理方法
     在现代互联网时代,云服务器已经成为了企业和个人用户的首选解决方案。一方面,云服务器提供了灵活、可扩展的计算资源,另一方面,其治理和维护也相对复杂。当云服务器出现异常报错时,如何有效地解决问题显得尤为重要。本文将就云服务器主机异常报错的常见类型、原因分析以及解决方案进行......
  • 如何解决帝国CMS刷新栏目报错?
    解决帝国CMS刷新栏目报错的问题,可以遵循以下步骤进行排查和解决:了解帝国CMS栏目刷新原理:刷新栏目页通常涉及从数据库中获取数据,并将其转换为静态HTML页面或动态生成页面。这一过程依赖于正确的数据库连接、有效的模板文件以及适当的服务器配置。确认错误类型:查看错误......
  • 帝国CMS报错Deprecated: Function get_magic_quotes
    当使用帝国CMS时遇到“Deprecated:Functionget_magic_quotes”这类报错,通常是因为PHP版本升级后,某些旧的函数被弃用。get_magic_quotes_gpc() 函数在PHP5.4中已被弃用,并在PHP7.0中被移除。原因分析PHP版本升级:如果你的服务器从较旧的PHP版本(如5.3或更低)升级到了PHP7.......
  • R语言安装graph包报错:package graph is not available for this version of R
    我的R语言版本是4.0.2,安装graph包的时候出现如下报错尝试过换源都无法下载后来尝试在google想搜索graph包的官网,搜出来:https://cran.r-project.org/web/packages/graph/index.html 应该是graph包被CRAN更新了,现在已不在使用根据它的提示,进入链接:https://www.bioconductor.or......
  • 帝国CMS报错:您的PHP配置文件php.ini配置有问题,怎么解决
    帝国CMS报错“您的PHP配置文件php.ini配置有问题”时,通常意味着PHP的某些配置项不符合帝国CMS的要求。以下是一些可能的解决方案:检查short_open_tag配置:如果你在使用较新版本的PHP(如5.4及以上),short_open_tag配置项默认是关闭的。帝国CMS可能依赖于<?这样的短标签格式。你需要......
  • C# 报错:System.Threading.ThreadStateException:”当前线程不在单线程单元中,因此无法
    原因分析System.Threading.ThreadStateException 错误通常发生在尝试在非UI线程中创建或访问 ActiveX 控件(如COM 组件)时。在 Windows Forms应用程序中,所有 UI操作必须在创建该UI 的线程(通常是主线程)上执行。解决方案要解决这个问题,你需要确保在 UI 线程上创建......
  • 避免帝国CMS刷新栏目报错的技巧,快速解决问题
    为了避免帝国CMS在刷新栏目时出现错误,可以采取以下技巧和步骤来快速解决问题:技巧与解决方法:检查文件和目录权限:确保目标文件(如index.shtml、index.html等)和目录具有适当的读写权限。通常,文件权限应设置为644,目录权限应设置为755。验证目录存在:确认目标目录已经创建。......
  • ORA-01440: column to be modified must be empty (修改列类型时报错:要修改的列必须为
    创建新列:在表中添加一个新的列,然后将数据迁移到新列,最后删除旧列并重命名新列。ALTERTABLE"MESDB"."NC_WORKORDER"ADD("RECEIPT_QUANTITY_NEW"NUMBER(10,6));​--将数据迁移到新列UPDATE"MESDB"."NC_WORKORDER"SET"RECEIPT_QUANTITY_NEW"="RE......
  • IIS服务器上传文件,超过40M报错问题
    如果在applicationHost.config中没有找到maxAllowedContentLength设置,可以手动添加它。请按照以下步骤操作:1.打开applicationHost.config使用文本编辑器(如记事本)以管理员权限打开C:\Windows\System32\inetsrv\config\applicationHost.config。2.添加或修改请求限制在......