响应式页面加载与Resize行为异常，求无需复制代码的最优解

嘿，我懂你的困扰——不想把重复代码硬塞进resize事件里，同时又要让逻辑在初始化和窗口尺寸变化时都能正确触发对吧？这其实是前端里很常见的场景，最优解法是把核心判断逻辑封装成独立函数，然后在两个时机调用它：页面初始化时，以及窗口resize（带防抖优化）时。

具体实现步骤 #

1. 封装核心逻辑：把判断视口宽度、执行对应操作的代码抽成一个单独函数，这样不用重复写两遍逻辑。
2. 初始化触发：页面加载完成后立即调用这个函数，保证初始状态正确。
3. resize监听+防抖：给窗口添加resize事件监听，但用防抖函数避免频繁拖动窗口时触发过多函数调用，提升性能。

代码示例 #

// 把核心判断和操作逻辑封装成独立函数
function handleViewportAction() {
  const viewportWidth = window.innerWidth;
  
  if (viewportWidth < 961) {
    // 执行你的 "does something" 操作
    console.log("执行 does something");
  } else {
    // 执行你的 "something else" 操作
    console.log("执行 something else");
  }
}

// 页面初始化时触发一次，保证加载时状态正确
document.addEventListener('DOMContentLoaded', handleViewportAction);

// 添加resize监听，用防抖避免频繁触发
let resizeDebounceTimer;
window.addEventListener('resize', () => {
  // 清除上一次的定时器
  clearTimeout(resizeDebounceTimer);
  // 250ms后执行逻辑，可根据需求调整延迟时间
  resizeDebounceTimer = setTimeout(handleViewportAction, 250);
});

为什么这是最优解？ #

• 避免代码重复：所有判断逻辑只写一次，维护起来更方便，改需求时只需要修改这一个函数。
• 性能优化：防抖处理能减少resize事件的触发频率，不会因为用户拖动窗口边框导致函数疯狂执行。
• 逻辑统一：初始化和resize时用的是同一套判断逻辑，不会出现两种场景下逻辑不一致的问题。

如果你的操作只是样式相关的，其实优先推荐用CSS媒体查询（@media (max-width: 960px)）来处理，这样完全不需要JS介入；但如果是必须用JS处理的逻辑（比如加载不同资源、绑定/解绑事件、修改DOM结构等），上面的方案就是最合理的选择。

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