ResizeObserver loop completed with undelivered notifications. 解决

"ResizeObserver loop completed with undelivered notifications"错误通常是由于在观察元素大小变化时，元素的大小变化过于频繁，导致回调函数无法及时处理所有通知。这可能会导致浏览器在一次循环中处理太多的通知，从而导致错误。

解决此问题的一种方法是使用“防抖动”技术，即在回调函数中添加一个延迟，以便在一段时间内只处理最后一个通知。可以使用以下代码解决此问题：

const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

const observer = new ResizeObserver(
  debounce((entries) => {
    // 处理元素大小变化的回调函数
  }, 16)
);

如果您使用的是Angular框架，则可以在main.ts文件中添加上述代码，以覆盖默认的ResizeObserver实现。但是，请确保在添加代码之前，您已经安装了@types/resize-observer-browser库。

相关问题

ResizeObserver loop completed with undelivered notifications.

ResizeObserver是一个Web API，它可以用来监听元素的大小变化。当元素的大小发生变化时，ResizeObserver会触发回调函数，并传递一个ResizeObserverEntry对象作为参数，该对象包含了元素的新大小和旧大小等信息。

当元素的大小变化非常频繁时，ResizeObserver可能会出现“loop completed with undelivered notifications”的警告。这个警告表示ResizeObserver在处理回调函数时，发现有一些通知没有被及时发送出去，可能会导致一些问题。

这个警告通常是由于回调函数执行时间过长，或者元素的大小变化太频繁导致的。为了避免这个问题，我们可以尽量减少回调函数的执行时间，或者使用debounce等技术来限制回调函数的执行频率。

resizeobserver loop completed with undelivered notifications.

"resizeobserver loop completed with undelivered notifications" 是一个在开发者工具中出现的警告消息，它表明在 ResizeObserver 循环期间存在未传递的通知。

ResizeObserver 是Web API的一部分，用于观察元素的大小变化。当元素的大小发生变化时，它会触发一个回调函数，开发者可以在该回调函数中执行相应的操作。

这个警告消息表示，在 ResizeObserver 的循环过程中，一些通知没有被传递到回调函数中。这可能是因为在一次循环中发生了太多的大小变化，导致部分通知被丢失。

通常情况下，这个警告消息不会对网页的功能和性能产生实质性的影响。它仅仅是一个提示，告诉开发者可能有一些未被处理的大小变化。

为了应对这个问题，开发者可以尝试减少页面中元素的大小变化次数，或者在回调函数中优化代码，以更快地处理通知。此外，也可以查看元素是否存在无效或循环依赖的布局，这些问题可能导致 ResizeObserver 循环的执行次数过多。

总而言之，"resizeobserver loop completed with undelivered notifications" 警告消息可以被看作是性能优化的提醒，开发者可以通过减少大小变化的次数和优化回调函数的处理能力来解决这个问题。