ResizeObserver loop completed with undelivered notifications. 报错
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) }, 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 函数自己写或者引入工具库
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2022-09-20 vue3 watch和 watchEffec和 computed 对比
2022-09-20 react useMemo、useEffect和 useCallback区别及与 vue 对比