使用ResizeObserver解决页面尺寸变动导致的echarts或者地图元素无法自适应问题
// 监听浏览器窗口大小变化是一个常见的操作,可能会频繁地触发,尤其是在窗口调整大小时。为了避免执行过多的计算和DOM操作,使用“防抖”,减少不必要的函数调用,从而提高性能
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 _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 16);
// 调用ResizeObserver的原生构造函数
super(callback);
}
};