如何在jquery中为$(window).resize事件添加if条件？

在jQuery中为$(window).resize事件添加条件判断

基础概念

$(window).resize() 是jQuery中用于监听浏览器窗口大小变化的事件。当用户调整浏览器窗口大小时，绑定到这个事件的函数会被触发执行。

添加条件判断的方法

要为resize事件添加条件判断，可以在事件处理函数内部使用if语句来控制逻辑执行。以下是几种常见的方式：

1. 基本条件判断

$(window).resize(function() {
    if ($(window).width() > 768) {
        // 当窗口宽度大于768px时执行的代码
        console.log('大屏幕');
    } else {
        // 当窗口宽度小于等于768px时执行的代码
        console.log('小屏幕');
    }
});

2. 使用防抖(debounce)技术优化性能

由于resize事件会频繁触发，可以使用防抖技术来限制执行频率：

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

$(window).resize(debounce(function() {
    if ($(window).width() > 1024) {
        // 只在调整停止后且宽度大于1024时执行
        console.log('宽屏模式');
    }
}, 250)); // 250毫秒内只执行一次

3. 基于多个条件的判断

$(window).resize(function() {
    const windowWidth = $(window).width();
    const windowHeight = $(window).height();
    
    if (windowWidth > 1200 && windowHeight > 800) {
        // 宽高都满足条件
        console.log('大尺寸窗口');
    } else if (windowWidth < 480) {
        // 手机竖屏模式
        console.log('移动设备竖屏');
    }
});

4. 保存上一次尺寸进行比较

let lastWidth = $(window).width();

$(window).resize(function() {
    const currentWidth = $(window).width();
    
    if (currentWidth !== lastWidth) {
        // 只有宽度真正发生变化时才执行
        console.log('宽度从', lastWidth, '变为', currentWidth);
        
        if (currentWidth > lastWidth) {
            console.log('窗口变宽了');
        } else {
            console.log('窗口变窄了');
        }
        
        lastWidth = currentWidth;
    }
});

应用场景

响应式设计：根据窗口大小调整布局
图表重绘：当容器大小变化时重新渲染图表
导航菜单切换：在小屏幕上显示汉堡菜单，大屏幕上显示完整菜单
图片懒加载：根据可视区域大小加载不同尺寸的图片

注意事项

resize事件会频繁触发，可能影响性能，建议使用防抖或节流技术
在条件判断中获取窗口尺寸时，最好将$(window).width()赋值给变量，避免多次调用
移动设备上，resize事件可能由虚拟键盘弹出/收起触发，而不仅仅是窗口大小变化
考虑使用CSS媒体查询替代部分JS逻辑，性能更优

完整示例

// 使用防抖的响应式布局调整
$(document).ready(function() {
    let lastWindowWidth = $(window).width();
    
    function handleResize() {
        const currentWidth = $(window).width();
        
        // 只有当宽度变化超过50px时才执行逻辑
        if (Math.abs(currentWidth - lastWindowWidth) > 50) {
            if (currentWidth >= 1200) {
                // 大桌面布局
                $('.sidebar').show();
                $('.mobile-menu').hide();
            } else if (currentWidth >= 768) {
                // 平板布局
                $('.sidebar').hide();
                $('.mobile-menu').show();
            } else {
                // 手机布局
                $('.sidebar').hide();
                $('.mobile-menu').show();
                $('.submenu').hide();
            }
            
            lastWindowWidth = currentWidth;
        }
    }
    
    // 添加防抖的resize事件处理
    $(window).resize(debounce(handleResize, 200));
    
    // 初始执行一次
    handleResize();
});

// 防抖函数
function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

这个示例展示了如何结合防抖技术和条件判断来优化resize事件处理，只在窗口大小变化达到一定阈值时才执行布局调整逻辑。