如何在window.innerWidth变化时实时记录其值？

问题根源 #

你当前的代码逻辑有个核心误区：

• 直接调用logWindow_width()和logWindowWidth()是在页面初始化阶段执行的，只会获取当时的窗口初始宽度
• resize事件的回调函数是在窗口尺寸变化时才触发的，回调里的返回值不会自动同步到外部，外部也没法主动捕获这个返回值

可行解决方案 #

方案1：用变量存储实时宽度

通过一个变量实时更新窗口宽度，后续需要获取时直接读取这个变量即可：

// 初始化时先赋值初始宽度
let currentWindowWidth = window.innerWidth;
console.log('初始宽度：', currentWindowWidth);

// 监听resize事件，实时更新变量
window.addEventListener('resize', function() {
  currentWindowWidth = window.innerWidth;
  console.log('变化后的宽度：', currentWindowWidth);
});

// 如需在其他地方获取实时宽度，直接读取currentWindowWidth
// 示例：定时打印实时宽度
setInterval(() => {
  console.log('当前实时宽度：', currentWindowWidth);
}, 1000);

方案2：直接在回调内处理业务逻辑

如果你的需求是宽度变化时执行特定操作，没必要返回值，直接把逻辑写在回调里更直接：

window.addEventListener('resize', function() {
  const width = window.innerWidth;
  console.log('当前宽度：', width);
  
  // 这里写你需要用宽度做的操作，比如适配布局
  if (width < 768) {
    document.querySelector('.container').style.gridTemplateColumns = '1fr';
  } else {
    document.querySelector('.container').style.gridTemplateColumns = '1fr 1fr';
  }
});

关键提醒 #

• 事件回调是异步触发的，只有当resize事件发生时才会执行，它的返回值不会被外部代码主动接收
• 要实时获取窗口宽度，核心是在回调里更新存储值，或者直接在回调内完成业务逻辑，而不是试图通过返回值传递

内容的提问来源于stack exchange，提问作者Matthew Abebe