如何实现窗口从移动端/平板端尺寸 resize 到桌面端时仅执行一次移除类操作

这个需求其实很典型，核心就是要跟踪屏幕状态的变化，而不是每次窗口 resize 都重复执行操作。你现在的代码问题在于，只要窗口宽度≥992就会执行移除类的操作，哪怕本来就是桌面端尺寸，反复拉窗口也会一直触发，这显然不是你想要的。

咱们可以用一个状态变量来记录当前的屏幕模式（移动端/桌面端），每次 resize 时对比前后状态，只有当状态从移动端切换到桌面端的瞬间，才执行移除类的操作，具体实现如下：

// 初始化屏幕状态：判断页面加载时是否处于桌面视图
let isDesktop = $(window).width() >= 992;

// 监听窗口resize事件
$(window).on('resize', function() {
  const currentWidth = $(window).width();
  const currentIsDesktop = currentWidth >= 992;

  // 关键判断：只有从移动端切换到桌面端时才执行操作
  if (!isDesktop && currentIsDesktop) {
    $('.megamenu').removeClass('opened');
  }

  // 更新状态变量，为下一次resize判断做准备
  isDesktop = currentIsDesktop;
});

代码说明： #

• 首先初始化isDesktop变量，确认页面刚加载时的屏幕状态，避免页面一开始就是桌面端的情况下误操作
• 每次 resize 时，先获取当前窗口宽度和对应的状态
• 只有当之前是移动端（!isDesktop）、现在变成桌面端（currentIsDesktop）的时候，才执行移除opened类的操作
• 最后一定要更新isDesktop变量，确保下一次 resize 能正确对比状态

额外优化：防抖处理 #

窗口 resize 事件会连续触发很多次（比如你拖动窗口边框的时候），频繁执行代码可能会有性能损耗。你可以给 resize 事件加个防抖，让代码只在 resize 停止后执行一次：

let isDesktop = $(window).width() >= 992;
let resizeTimeout; // 用于存储定时器ID

$(window).on('resize', function() {
  // 每次resize时清除之前的定时器，避免重复触发
  clearTimeout(resizeTimeout);
  
  // 延迟200ms执行逻辑，你可以根据需求调整这个时间
  resizeTimeout = setTimeout(function() {
    const currentWidth = $(window).width();
    const currentIsDesktop = currentWidth >= 992;

    if (!isDesktop && currentIsDesktop) {
      $('.megamenu').removeClass('opened');
    }

    isDesktop = currentIsDesktop;
  }, 200);
});

这样处理后，不管你怎么拖动窗口，只有当你停止拖动200ms后，代码才会执行一次，既满足需求又提升了性能。

备注：内容来源于stack exchange，提问作者patie