响应式1000px断点触发页面重载的jQuery代码问题排查

• 条件判断语法错误：if判断中错误使用赋值运算符=而非比较运算符，且判断逻辑不符合需求，你需要检测的是窗口宽度是否小于1000px，而非等于1000px，该错误会直接导致条件判断不生效。
• 事件绑定逻辑错误：仅在页面初始加载时满足宽度条件才绑定resize事件，若页面初始加载宽度大于1000px，后续用户手动调整窗口到小于1000px的场景完全没有覆盖。
• 缺少防抖和跨阈值判断：resize事件会在窗口调整过程中连续触发上百次，直接在事件回调中写刷新逻辑会导致页面无限反复重载，无法正常使用。

实现逻辑为：先记录页面初始加载时的宽度阈值状态，resize事件触发时增加防抖避免频繁执行，仅当窗口宽度从大于等于1000px调整到小于1000px时，才触发一次页面刷新。

// 记录初始窗口是否大于等于阈值
let isOverThreshold = window.innerWidth >= 1000
// 防抖定时器
let resizeTimer = null

$(window).on('resize', function() {
  clearTimeout(resizeTimer)
  // 200ms防抖时间可自行调整
  resizeTimer = setTimeout(() => {
    const currentWidth = window.innerWidth
    // 仅当从≥1000px调整到<1000px时触发刷新
    if (isOverThreshold && currentWidth < 1000) {
      window.location.reload()
      return
    }
    // 若需要窗口从<1000px调整到≥1000px时也刷新，可将上方if条件替换为下方代码：
    // if ((isOverThreshold && currentWidth < 1000) || (!isOverThreshold && currentWidth >= 1000)) {
    //   window.location.reload()
    //   return
    // }

    // 更新阈值状态
    isOverThreshold = currentWidth >= 1000
  }, 200)
})

HTML部分可保留原有jQuery引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>窗口从大于1000px调整到小于1000px时会自动重载一次</span>

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