窗口Resize时切换Swiper元素类名无效，求技术解决方案

代码存在的核心问题 #

• toggle方法逻辑不符需求：classList.toggle('mySwiper')会在每次触发resize时切换类的存在状态——哪怕窗口宽度一直小于834，每触发一次resize就会加/删一次类，这和你想要的「宽度小于834时添加类，否则移除」逻辑完全相反。
• 缺少初始状态判断：页面首次加载时，如果窗口宽度本来就小于834，resize事件不会触发，类名不会被自动添加。
• 事件绑定不严谨：直接用addEventListener虽然在浏览器中默认绑定到window，但明确指定window.addEventListener能避免环境差异带来的问题。
• 未做防抖处理：resize事件会在窗口调整过程中频繁触发，可能导致不必要的DOM操作，影响页面性能。

修正后的代码 #

const swiperRooms = document.querySelector('#swiperRooms');

// 封装判断逻辑为独立函数，方便复用
function handleSwiperClass() {
    if (window.innerWidth < 834) {
        swiperRooms?.classList.add('mySwiper');
    } else {
        swiperRooms?.classList.remove('mySwiper');
    }
}

// 页面加载时先执行一次，处理初始窗口状态
handleSwiperClass();

// 添加防抖的resize事件监听
window.addEventListener('resize', () => {
    // 防抖：延迟100ms执行，避免频繁触发DOM操作
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(handleSwiperClass, 100);
});

关键说明 #

• 用add和remove替代toggle，确保逻辑是「满足条件添加类，不满足移除类」，而非无差别切换状态。
• 页面加载时主动调用判断函数，保证初始窗口宽度符合条件时类名正确。
• 加入防抖逻辑，减少resize事件触发时的DOM操作次数，优化性能。

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