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

Question

我有一个网站，在调整大小之后需要重新加载，我已经编写了一段自动重新加载页面的脚本，但是代码存在问题。以下是我想让脚本实现的功能：

- 如果窗口宽度小于 768px，并且保持小于 768px，则不重新加载页面 - 如果窗口宽度大于等于 768px，并且变为小于 768px，则重新加载页面一次 - 如果窗口宽度小于 768px，并且变为大于等于 768px，则重新加载页面 - 如果窗口宽度大于等于 768px，并且保持大于等于 768px，则始终重新加载

最后一部分可以使用以下代码轻松完成：

// 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);
    }
}

我认为我需要创建一个存储当前 $(window).width(); 的变量，然后使用 if {} else if {} else {} 进行检查，但是从这个点开始，我的思维就失去了控制。

- Marian Rick

---

https://dev59.com/0G035IYBdhLWcg3wVeXn - Skatch

为什么页面需要重新加载？如果这是一个样式问题，你可能需要研究一下媒体查询。 - Jonathon Blok

@JonathonBlok 我有几个脚本，添加后无法“删除”，尽管网站计算了许多高度和宽度，但需要在窗口大小更改时重新计算！ - Marian Rick

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);                
        }
    }
}

- Jonathon Blok