Uncaught Resize(bserver loop completed with undelivered notifications.
时间: 2025-02-10 09:08:23 浏览: 47
### 解决方案概述
当遇到 `ResizeObserver loop completed with undelivered notifications` 的警告时,这通常是由于频繁触发的布局调整导致浏览器无法及时处理所有的通知所引起的。一种有效的解决方案是在全局范围内对 ResizeObserver 进行防抖处理。
### 实现细节
为了防止因快速连续的变化而导致过多的通知堆积,可以在项目入口文件(如 main.js)中覆盖默认的 ResizeObserver 行为,通过引入 lodash 库中的 debounce 函数来延迟执行回调函数:
```javascript
// 导入 Lodash 中的 debounce 方法用于创建具有节流效果的新函数
import { debounce } from 'lodash';
// 备份原始的 ResizeObserver 构造器以便后续继承其功能
const originalResizeObserver = window.ResizeObserver;
// 定义一个新的 ResizeObserver 类并扩展自原生类
window.ResizeObserver = class ResizeObserver extends originalResizeObserver {
constructor(callback) {
// 使用 debounce 对传入的 callback 增加延时调用机制
callback = debounce(callback, 200);
// 调用父级构造器初始化实例对象的同时传递修改后的回调函数
super(callback);
}
};
```
上述代码片段展示了如何利用 JavaScript 继承特性以及第三方库提供的工具方法实现对标准 API 功能增强的目的[^1]。
另外需要注意的是,如果不想依赖外部库,则可以自行编写简单的防抖逻辑作为替代方案:
```javascript
function createDebouncedFunction(func, waitTime) {
let timeoutId;
return function(...args) {
if(timeoutId !== undefined){
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => func.apply(this, args), waitTime);
};
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
constructor(callback) {
callback = createDebouncedFunction(callback, 200);
super(callback);
}
}
```
此版本实现了相同的功能而不必加载额外资源[^3]。
阅读全文
相关推荐

















