resizeobserver loop completed with undelivered notifications.报错解决

环境:Vue3+Element Plus

使用了 Table 表格后,第一次刷新打开页面时,会报错resizeobserver loop completed with undelivered notifications.

报错原因:无法在一个浏览器帧中传递所有的通知,因为它们需要的处理时间比帧的剩余时间更长。这通常发生在被观察元素的尺寸变化导致了一连串的回调函数被调用时。

看了很多解决方案,觉得使用 lodash 方案比较适合我的场景,因为lodash里面有很多可以使用的到的函数。

官方介绍

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

  1. 遍历 array、object 和 string
  2. 对值进行操作和检测
  3. 创建符合功能的函数
使用方法:

//浏览器环境:
<script src="lodash.js"></script>

//通过 npm:
$ npm i -g npm
$ npm i --save lodash

在App.vue中加入以下代码

<script lang="ts" setup>
import { debounce } from "lodash";

const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
  constructor(callback: (...args: any[]) => void) {
    callback = debounce(callback, 100);
    super(callback);
  }
};

</script>

End
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容