js 怎么监听浏览器窗口大小变化

监听javascript中浏览器窗口大小变化主要通过window.addeventlistener('resize', callback)实现，需绑定resize事件到window对象并执行回调函数；为兼容不同浏览器，获取窗口宽高可使用window.innerwidth、document.documentelement.clientwidth或document.body.clientwidth；为优化频繁触发导致的性能问题，可采用防抖或节流技术，1. 防抖通过设定延迟（如250毫秒），仅在最后一次触发后执行一次，适用于调整结束后执行的场景；2. 节流通过设定时间间隔（如250毫秒），在持续触发期间定期执行一次，适用于需要过程中定期响应的场景；在react中，应使用useeffect在组件挂载时添加监听，在卸载时移除以避免内存泄漏，并结合usestate更新状态；此外，还可使用matchmedia监听特定媒体查询变化，如根据(max-width: 768px)切换逻辑，该方法避免频繁触发，适合响应式设计，且需注意老版本浏览器兼容性。

监听 JavaScript 中的浏览器窗口大小变化，主要通过

window.addEventListener('resize', callback)

resize

window

解决方案

window.addEventListener('resize', function() {
  // 获取窗口新的宽度和高度
  let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  // 在这里执行你的逻辑，例如更新布局、重新计算元素位置等
  console.log('窗口大小改变了！宽度：' + width + '，高度：' + height);
});

window.innerWidth

document.documentElement.clientWidth

document.body.clientWidth

如何优化 resize 事件的性能？

频繁调整窗口大小会触发大量的

resize

防抖 (Debounce): 只在最后一次触发后等待一段时间再执行。

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const optimizedResize = debounce(function() {
  console.log('防抖后的 resize 事件');
  // 执行你的逻辑
}, 250); // 250 毫秒的延迟

window.addEventListener('resize', optimizedResize);

节流 (Throttle): 在一段时间内只执行一次。

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

const optimizedResize = throttle(function() {
  console.log('节流后的 resize 事件');
  // 执行你的逻辑
}, 250); // 250 毫秒的间隔

window.addEventListener('resize', optimizedResize);

选择防抖还是节流取决于你的具体需求。如果只需要在调整结束后执行一次，防抖更合适。如果需要在调整过程中定期执行，节流更合适。

如何在 React 组件中使用 resize 事件监听？

在 React 组件中，通常在

componentDidMount

componentWillUnmount

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组，确保 effect 只在组件挂载和卸载时执行

  return (
    

      当前窗口宽度：{windowWidth}
    
  );
}

export default MyComponent;

这里使用了

useState

handleResize

useEffect

[]

除了 window.resize 事件，还有其他方法监听窗口大小变化吗？

虽然

window.resize

matchMedia

const mediaQuery = window.matchMedia('(max-width: 768px)');

function handleMediaChange(event) {
  if (event.matches) {
    console.log('屏幕小于 768px');
  } else {
    console.log('屏幕大于 768px');
  }
}

mediaQuery.addListener(handleMediaChange);

// 初始化时执行一次
handleMediaChange(mediaQuery);

这种方法适用于根据不同的屏幕尺寸应用不同的样式或逻辑。

matchMedia

addListener