js如何监听元素尺寸变化 检测元素大小变化的3种监听方案！

const element = document.getElementById('yourElement');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;

    console.log(`Element's new size: width=${width}, height=${height}`);
    // 在这里执行你的逻辑，例如重新布局、更新图表等
  }
});

resizeObserver.observe(element);

// 如果不再需要监听，可以取消监听
// resizeObserver.unobserve(element);
// 或者取消所有监听
// resizeObserver.disconnect();

const element = document.getElementById('yourElement');

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 检查元素的宽度或高度是否发生变化
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      console.log(`Element's size changed: width=${width}, height=${height}`);
    }
  });
});

observer.observe(element, {
  attributes: true,
  attributeFilter: ['style'] // 只监听 style 属性的变化
});

// 停止监听
// observer.disconnect();

window.onresize = () => {
  const element = document.getElementById('yourElement');
  const width = element.offsetWidth;
  const height = element.offsetHeight;

  console.log(`Element's size changed: width=${width}, height=${height}`);
};

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const currentTime = Date.now();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(this, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          timeoutId = null;
          lastExecTime = Date.now();
        }, delay - (currentTime - lastExecTime));
      }
    }
  };
}

const throttledResizeObserver = new ResizeObserver(throttle(entries => {
  // 处理尺寸变化
  console.log("Throttled resize event");
}, 200)); // 200ms 节流

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedResizeObserver = new ResizeObserver(debounce(entries => {
  // 处理尺寸变化
  console.log("Debounced resize event");
}, 200)); // 200ms 防抖