【elementplus】解决改变屏幕大小时el-table报错ResizeObserver loop limit exceeded

最新推荐文章于 2024-09-05 16:15:36 发布

湛海不过深蓝

最新推荐文章于 2024-09-05 16:15:36 发布

阅读量2.4k

点赞数 10

分类专栏： elementuiPlus 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bbt953/article/details/131658012

版权

elementuiPlus 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章讲述了在开发过程中遇到ResizeObserver在布局变化时过于频繁调用的问题，这影响了开发效率。为了解决这个问题，文章提出了使用window.requestAnimationFrame和debounce函数来限制回调函数的执行频率，将回调延迟200毫秒执行，从而避免频繁弹出报错黑框。在App.vue和main.js中应用这个修改可以有效地解决此问题。

摘要由CSDN通过智能技术生成

该报错虽然不影响项目运行，但是影响开发效率，总是弹出报错的黑框很烦人

该报错原因：new ResizeObserver包裹的方法，在布局发生变化时，不支持每帧都调用

解决方法：用 window.requestAnimationFrame包裹回调函数

在App.vue/main.js中加入以下这段代码即可解决：

// app.vue写在script里面  main.js写在app挂在完之后
const debounce = (fn, delay) => {
  let timer
   return (...args) => {
     if (timer) {
       clearTimeout(timer)
     }
     timer = setTimeout(() => {
       fn(...args)
     }, delay)
   }
}
  
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
   constructor(callback) {
     callback = debounce(callback, 200);
     super(callback);
   }
}