JavaScript中resize函数不生效？窗口调整时宽度未更新的解决方法

嘿，这个坑我之前踩过！你遇到的问题几乎可以肯定是宽度值被缓存了，没有在resize时重新计算——比如你可能在页面加载时把.wrap的宽度存在了一个全局变量里，之后resize调用函数时直接复用了这个旧值，而不是去获取当前的实时宽度。

先模拟一下你可能写错的代码场景（是不是很眼熟？）：

// 页面加载时就固定了宽度值
const wrapWidth = document.querySelector('.wrap').offsetWidth;

function setTestWidth() {
  const testEls = document.querySelectorAll('.test');
  testEls.forEach(el => {
    el.style.width = wrapWidth + 'px'; // 一直用加载时的旧值
  });
}

// 初始化调用
window.addEventListener('load', setTestWidth);
// resize时还是用旧值
window.addEventListener('resize', setTestWidth);

解决方案一：每次调用都重新计算实时宽度 #

把宽度计算放到函数内部，这样每次调用（包括resize时）都会获取当前.wrap的真实宽度：

function setTestWidth() {
  // 关键：每次执行都重新获取当前的wrap宽度
  const currentWrapWidth = document.querySelector('.wrap').offsetWidth;
  const testEls = document.querySelectorAll('.test');
  
  testEls.forEach(el => {
    el.style.width = currentWrapWidth + 'px';
  });
}

// 页面加载时初始化
window.addEventListener('load', setTestWidth);
// 窗口 resize 时更新
window.addEventListener('resize', setTestWidth);

解决方案二：加防抖优化性能 #

如果窗口resize时函数触发太频繁（会导致页面卡顿），可以给resize事件加个防抖函数，延迟执行，减少计算次数：

// 防抖工具函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

function setTestWidth() {
  const currentWrapWidth = document.querySelector('.wrap').offsetWidth;
  const testEls = document.querySelectorAll('.test');
  
  testEls.forEach(el => {
    el.style.width = currentWrapWidth + 'px';
  });
}

// 包装成防抖后的函数
const debouncedSetWidth = debounce(setTestWidth);

window.addEventListener('load', setTestWidth);
window.addEventListener('resize', debouncedSetWidth);

更优方案：用CSS替代JS（推荐） #

如果你的需求只是让.test的宽度和.wrap保持一致，完全不需要JS！直接用CSS就能搞定，浏览器会自动处理resize的布局更新：

.test {
  width: 100%; /* 或者 inherit，根据你的布局需求调整 */
  box-sizing: border-box; /* 避免padding/margin撑爆宽度 */
}

这种方式性能更好，也不会出现JS的作用域或缓存问题，是首选方案。

排查小技巧 #

检查你的代码里有没有把宽度值存在函数外部的变量里——如果有，那resize时这个变量不会自动更新，必须在函数内部重新计算获取实时值。

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