检测 window 调整大小事件何时完成

Question

我有一个网站需要在调整大小后重新加载，并且发现了我自己编写脚本的限制，该脚本会自动重新加载页面：

我希望脚本的行为如下：

if window width was < 768px and stays < 768px I do not want to reload the page

if window width was >= 768px and goes < 768px I want to reload the page once

if window width was < 768px and goes >= 768px I want to reload the page

if window width was >= 768px and stays >= 768px it always should reload

最后一部分使用以下代码很容易完成：

// After resize events
var id;
$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 500);
});
function doneResizing(){
    if($(window).width() > 767) {
        if (window.RT) clearTimeout(window.RT);
          window.RT = setTimeout(function()
          {
            this.location.reload(false); /* false to get page from cache */
          }, 200);
    }
}

我想我必须创建一个 var 来存储当前的 $(window).width(); 然后用 if {} else if {} else {} 检查，但从这一点上我的思想失去了控制。

Answer 1

// After resize events
var id;
var startWidth = window.innerWidth; //get the original screen width

$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 500);
});
function doneResizing(){
    if ($(window).width() > 767) {
        this.location.reload(false);
    } else {
        if (startWidth > 767){
            this.location.reload(false);                
        }
    }
}

检测 window 调整大小事件何时完成

Detect when window resize event is done

javascript

jquery

resize