调整窗口大小时更改变量

Question

此代码完美无缺：

var size = function () {
    if ($(window).width() <= 768) {
        return '2'
    } else {
        return '3'
    }
}();

但是我想通过窗口调整大小但不能正常工作：

$(window).on('load resize', function () {
    var size = function () {
        if ($(window).width() <= 768) {
            return '2'
        } else {
            return '3'
        }
    }();
});

Answer 1

看到这个小提琴：http://jsfiddle.net/QcKB9/13/

如何搞乱jquery / resize东西的很好的例子..

$(window).resize(function() {
 if (resizeTimer) clearTimeout(resizeTimer);
 resizeTimer = setTimeout(myResize, 50);
});

Answer 2

试试这个，

function checkWidth(){
    if ($(window).width() <= 768) {
        alert('2');
    } else {
        alert('3');
    }
}
$(function(){
    checkWidth();
});
$(window).on('resize', function () {
    checkWidth();
});

Demo

Answer 3

on的委托版本不允许多种事件类型。

然而，bind方法允许多个事件名称，因此您只需将on更改为bind，您的代码将按原样运行（包括首次加载时运行）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/aE9qU/2/

$(window).bind('load resize', function () {

    var size = function () {

        if ($(window).width() <= 768) {
            return '2'
        } else {
            return '3'
        }
    }();
    console.log(size);
});

注意我更改了默认的JSFiddle + Jquery行为以匹配您的代码（不是将它包装在onload中，否则它将不起作用）。