javascript - 超过一定宽度时重新加载页面

Question

我希望仅当浏览器窗口高于或低于 768 像素时才重新加载页面。这是我失败的尝试。

if ($(window.width() > "769") {
    $(window).resize(function () {
        if ($(window).width() < "769") {
            location.reload();
        }
    });

}
elseif($(window.width() < "769") {

    $(window).resize(function () {
        if ($(window).width() > "769") {
            location.reload();
        }
    });

}

我确信有一种非常简单的方法可以做到这一点。

Answer 1

demo jsFiddle

页面重新加载的证明是(选项卡中的等待图标 :D)生成随机数的 Math random(在演示中。)

var ww = $(window).width();
var limit = 769;

function refresh() {
   ww = $(window).width();
   var w =  ww<limit ? (location.reload(true)) :  ( ww>limit ? (location.reload(true)) : ww=limit );
}

var tOut;
$(window).resize(function() {
    var resW = $(window).width();
    clearTimeout(tOut);
    if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {        
        tOut = setTimeout(refresh, 100);
    }
});

超时函数将帮助调整窗口大小，等待 100 毫秒再调用 refresh 函数。
您可以增加超时值以提高可用性。