JavaScript窗口尺寸检测代码优化咨询：加载与resize场景

嘿，你的思路没问题，但确实可以通过复用逻辑和优化事件处理让代码更简洁高效！咱们一步步来改进：

1. 提取重复逻辑为独立函数 #

原代码里页面加载和窗口resize时的检测逻辑完全重复，把它抽成一个单独的函数，能大幅减少冗余代码：

function checkWindowSize() {
  'use strict';
  const w = window.innerWidth;
  if (w > 500) {
    console.log("got here");
  }
}

2. 初始化调用 + 绑定resize事件 #

现在只需要在页面加载时执行一次检测，再把函数绑定到resize事件上即可，不用重复编写相同的判断逻辑：

// 页面加载完成后立即执行一次检测
checkWindowSize();

// 给resize事件绑定检测函数
window.addEventListener("resize", checkWindowSize);

3. 进阶优化：添加防抖处理 #

注意：resize事件会在窗口拖动过程中高频触发，可能造成不必要的性能消耗。给resize事件加个防抖函数，让检测逻辑只在用户停止拖动窗口后才执行，体验会更流畅：

// 防抖工具函数：控制函数在指定延迟后才执行
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 用防抖后的函数绑定resize事件
window.addEventListener("resize", debounce(checkWindowSize));

额外说明 #

• 原代码外层的if(window.innerWidth > 500)完全多余，因为函数内部已经做了相同的判断，直接去掉即可。
• 用const代替var更符合现代JavaScript规范，能避免变量提升带来的潜在问题。
• 防抖的延迟时间可以根据需求调整，100ms是兼顾响应速度和性能的常用取值。

这样改完后，代码既简洁高效，逻辑也更清晰啦！

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