JS监听窗口大小变化的正确方法

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JS监听窗口大小变化方法》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

监听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 事件，如果每次都执行复杂的计算或 DOM 操作，可能会导致性能问题。可以采用“防抖 (debounce)”或“节流 (throttle)”技术来优化。

防抖 (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): 在一段时间内只执行一次。

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 (
    <div>
      当前窗口宽度：{windowWidth}
    </div>
  );
}

export default MyComponent;

这里使用了 useState hook 来存储窗口宽度，并在 handleResize 函数中更新它。useEffect hook 用于添加和移除事件监听。空依赖数组 [] 确保 effect 只在组件挂载和卸载时执行，避免不必要的更新。

除了 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 的替代方法，具体可以查阅相关文档。

好了，本文到此结束，带大家了解了《JS监听窗口大小变化的正确方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！