resizeobserver loop completed with undelivered noticications

Question

 <ve-table :columns="columns" :table-data="tableData" />

easyTable框架使用就会报错 ** resizeobserver loop completed with undelivered noticications**
请问如何解决

Answer 1

shuleijia 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

你遇到的错误"resizeobserver loop completed with undelivered noticications"通常是由于使用了ResizeObserver API时出现循环调用导致的。这个错误可能是由于在ResizeObserver回调中产生了某种方式的布局改变，然后导致又触发了ResizeObserver回调，从而形成了循环。

要解决这个问题，可以尝试以下几种解决方案：

1. 添加节流功能：在回调函数中添加节流功能，即通过设置一个定时器，在指定的时间间隔内只执行一次回调。这样可以避免循环调用的问题。

   let resizeTimer;
   const observer = new ResizeObserver(entries => {
     if (resizeTimer) {
       clearTimeout(resizeTimer);
       resizeTimer = null;
     }
     resizeTimer = setTimeout(() => {
       // 在这里执行你的回调逻辑
     }, 100); // 设置一个合适的时间间隔，单位为毫秒
   });
   
   // 使用ResizeObserver监听元素
   observer.observe(element);
   

2. 排除不必要的触发：在回调函数中，检查布局变化是否真正需要执行回调操作。可能有些触发事件不是我们所关心的，可以通过一些条件判断来排除不必要的操作。

   const observer = new ResizeObserver(entries => {
     const entry = entries[0]; // 只处理第一个触发事件
     const { width, height } = entry.contentRect;
   
     // 根据具体情况判断是否需要执行回调
     if (width > 0 && height > 0) {
       // 在这里执行你的回调逻辑
     }
   });
   
   // 使用ResizeObserver监听元素
   observer.observe(element);
   

3. 检查其他代码是否导致循环调用：检查整个代码逻辑，确保没有其他地方会导致ResizeObserver的回调被多次触发。如果有其他涉及元素大小变化的代码，需要确保它们不会引起循环调用。

请根据你的具体情况选择适合的解决方案。