使用v-echarts拖拽大小时报ResizeObserver loop completed with undelivered notifications

问题现象

在使用v-echarts做大屏项目时报错，ResizeObserver loop completed with undelivered notifications。经过查询后得知可在main.js或者app.vue中写入一个防止抖动方法即可。

在vue3.0中的方法如下：

        使用typescirpt实现：

export default defineComponent({
  setup() {
    const debounce = (callback: (...args: any[]) => void, delay: number) => {
      let tid: any;
      return function (...args: any[]) {
        const ctx = self;
        tid && clearTimeout(tid);
        tid = setTimeout(() => {
          callback.apply(ctx, args);
        }, delay);
      };
    };

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

不使用typrescript：

export default {  
  setup() {  
    function debounce(callback, delay) {  
      let tid;  
      return function() {  
        const ctx = this;  
        const args = arguments;  
        tid && clearTimeout(tid);  
        tid = setTimeout(function() {  
          callback.apply(ctx, args);  
        }, delay);  
      };  
    }  
  
    const originalResizeObserver = window.ResizeObserver;  
    window.ResizeObserver = class ResizeObserver extends originalResizeObserver {  
      constructor(callback) {  
        const debouncedCallback = debounce(callback, 20);  
        super(debouncedCallback);  
      }  
    };  
  }  
};

以下是文心一言对代码的解释：

export default defineComponent({ ... });

这是 Vue 3 的 Composition API 的方式，用于定义一个 Vue 组件。

setup() { ... };

setup 函数是 Composition API 的入口点。在 setup 函数中，你可以定义响应式状态、计算属性、方法、生命周期钩子等。

const debounce = (callback: (...args: any[]) => void, delay: number) => { ... };

这是一个防抖函数的定义。防抖是一种常见的技术，用于限制某个函数在一定时间内的执行频率。这里，如果防抖函数在 delay 毫秒内被多次调用，那么只有最后一次调用会在 delay 毫秒后执行。

let tid: any;

这是一个变量，用于存储 setTimeout 返回的定时器ID。

return function (...args: any[]) { ... };

返回一个新的函数，该函数包装了原始的 callback 函数，并为其添加了防抖功能。

const _ = (window as any).ResizeObserver;

保存原生的 ResizeObserver 到变量 _ 中。

(window as any).ResizeObserver = class ResizeObserver extends _ { ... };

重新定义 window 上的 ResizeObserver，使其继承自原生的 ResizeObserver，并在构造函数中添加防抖功能。

constructor(callback: (...args: any[]) => void) { ... };

这是新的 ResizeObserver 的构造函数。它接受一个回调函数作为参数，并使用之前定义的 debounce 函数为其添加防抖功能。

callback = debounce(callback, 20);

将传入的回调函数通过 debounce 函数处理，使其具有防抖功能，并设置防抖时间为20毫秒。

super(callback);

调用原生的 ResizeObserver 的构造函数，并将防抖后的回调函数传递给它。

总结：这段代码的主要目的是修改浏览器的 ResizeObserver，使其在执行回调时具有防抖功能。这样，当窗口大小改变时，回调不会立即连续触发，而是会等待20毫秒后执行最后一次的调用。这有助于减少不必要的计算或DOM操作，提高性能。

参考来源:

关于用element-ui中碰到的ERROR ResizeObserver loop completed with undelivered notifications.问题-CSDN博客