Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ResizeObserver loop completed with undelivered notifications. 报错

ResizeObserver loop completed with undelivered notifications. 报错

作者头像
蓓蕾心晴
发布于 2024-11-21 03:31:47
发布于 2024-11-21 03:31:47
64800
代码可运行
举报
文章被收录于专栏:前端小叙前端小叙
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

改后如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
      }, 300))
      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)
    }
  }
// 或者

 debounce 函数自己写或者引入工具库

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-09-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ResizeObserver在项目中的应用
ResizeObserver是一个用于监听元素尺寸变化的 JavaScript API。它可以在不依赖轮询或事件冒泡的情况下,高效地检测元素尺寸的变化。
一起重学前端
2024/09/14
3660
从0到1搭建一款页面自适应组件(Vue.js)
组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。 建议在组件内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。 使用前请注意将body的margin设为0,否则会引起计算误差。 fullScreenContainer.vue <template> <div id="full-screen-container" :ref="ref"> <template v-if="ready"> <slot></slot> </template>
Vam的金豆之路
2021/12/01
1.7K0
从0到1搭建一款页面自适应组件(Vue.js)
requestAnimationFrame实现单张图片无缝持续滚动
在很久以前,有写过一个使用 js 实现单张图片持续滚动图片的 代码,但那一版实现会持续操作DOM,向DOM中插入元素,性能较差,最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便,遂重新实现了一版,效果更赞,性能更好。
蓓蕾心晴
2022/05/09
4.1K0
requestAnimationFrame实现单张图片无缝持续滚动
逐步拆解React组件—Lazyload懒加载
在平时开发的时候我们总会遇到长列表,因为本身web在长列表的性能并不是特别好;加之web本身受到网络波动影响特别大,在首屏同时加载过多的内容会导致卡顿不流畅响应速度慢等问题。对此我们常用懒加载机制来进行优化。
gary12138
2022/10/05
1.9K0
[day-ui] Affix 组件学习
固钉组件是把页面某个元素相对页面 HTML 或者某个 dom 内定位显示,例如固定页面顶部/底部显示,页面宽高改变也会保持原位置。如果进行滚动,超过定义的范围就会固定定位,否则会跟随页面滚动
测不准
2021/05/26
1.4K0
【JS】1684- 重学 JavaScript API - Resize Observer API
Resize Observer API[1] 可以帮助我们监听元素尺寸的变化,并在尺寸变化时执行一些操作。例如,我们可以使用 Resize Observer API 来动态调整 UI 布局、加载或卸载图片等。
pingan8787
2023/09/01
8610
【JS】1684- 重学 JavaScript API - Resize Observer API
Canvas 进阶(一)二维码的生成与扫码识别
因此,打算写一系列关于 canvas 的文章,探索学习提升自己的同时顺便分享给大家。
小皮咖
2019/11/05
3.1K0
canvas实现拖动页面时显示窗口视频
简介   当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽。   今晚心血来潮,起了动手试试的念头。我的想法很简单,用canvas来获取视频每一帧的数据,并用动画函数 requestAnimationFrame函数(这里没有考虑兼容性)来显示每一帧的视频数据。另外,对canvas绑定拖动的 功能,这样就基本实现了简易的窗口视频。   本章内容的重点就是requestAnimationFrame函数和ca
欲休
2018/03/15
1.8K0
canvas实现拖动页面时显示窗口视频
vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度
解决文本溢出,鼠标悬浮展示tooltips,要解决2大难题。第一个是解决文本宽度的问题。毕竟 若果text-overflow: ellipsis生效,那么其父容
周陆军博客
2023/03/18
2.3K0
移动端H5页面开发坑点指南
前言 在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!
Javanx
2019/10/28
3.7K0
我用Tauri开发的待办效率工具开源了!
Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git
微芒不朽
2024/07/30
4510
我用Tauri开发的待办效率工具开源了!
Js网页添加水印
明知山
2023/09/01
2.1K0
Js网页添加水印
图表列表性能优化:可视化区域内最小资源消耗
之前写过《懒加载优化:JavaScript IntersectionObserver API监听元素是否可见》,基于上一篇文章,做个滚动懒加载完全不是问题。
周陆军
2021/06/26
2.5K0
three.js 带更新文字的旋转地球
查看旋转地球效果 主要用到几个知识点 (1)显示文字是使用了three.js 的精灵(Sprite),精灵的文字方向始终面向相机,文字是在canvas中画的,精灵的材质就是加载的带有文字的canvas function showText(){ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.canvas.width =256; const x =0;
tianyawhl
2019/04/17
10.4K0
three.js 带更新文字的旋转地球
Tensorflow.js 视频图片多目标检测
Tensorflow.js 官方提供了很多常用模型库,涵盖了平时开发中大部分场景的模型。例如,前面提到的图片识别,除此之外还有人体姿态识别,目标物体识别,语音文字等识别。其中一些可能是 Python 转换而来,但都是开发人员用海量数据或资源训练的,个人觉得准确度能满足大部分功能开发要求。这里要介绍的是目标物体识别模型 ——CooSSD。
北桥苏
2024/05/11
3650
Tensorflow.js 视频图片多目标检测
three.js 事件交互 原
在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取,原理是:相机与鼠标所在的设备坐标之间的连线经过哪些物体。
tianyawhl
2019/05/07
4K0
threejs之显示Label-CSS2DRenderer
1、采用threeJs的精灵(Sprite),具体用法查看我另一篇博客https://my.oschina.net/u/2612473/blog/3038066 2、使用CSS2DRenderer
tianyawhl
2019/05/31
6.3K1
添加气泡上升特效
添加JavaScript 在需要的地方添加以下JS //运行主函数 circleMagic(); //主函数内容 function circleMagic(options) { let width; let height; let canvas; let ctx; let animateHeader = true; const circles = []; const settings = opt
闲花手札
2021/08/24
1.1K0
基于前端的计时器工具:实现与优化
在前端开发中,计时器是一个常见的工具,广泛应用于倒计时、定时任务、间隔刷新等场景。本文将介绍如何在前端实现一个通用的计时器工具,并通过实例深入探讨其优化和应用。
一键难忘
2024/10/12
1.6K1
前端基于DOM或者Canvas实现页面水印
我们会看到很多页面带有水印,但是怎么实现呢?当然可以有多种实现方式,本文主要讲解在vue项目中基于DOM或者Cavans实现水印效果,当然还有其他的实现方式,比如在原图片的基础上加上水印生成新的图片,但是这需要后端处理。因为要在vue项目中使用,所以我使用自定义指令可以直接对挂载的dom实现水印效果。
不叫猫先生
2023/11/14
7980
前端基于DOM或者Canvas实现页面水印
相关推荐
ResizeObserver在项目中的应用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档