javascript - 在一定量后调整大小时刷新浏览器

Question

我有一个相当复杂的页面(响应式)，运行着许多脚本，我不想在调整浏览器大小时尝试重新计算所有这些脚本，而是希望在调整浏览器大小时触发刷新。

问题是，浏览器调整大小时的刷新会使 Android 设备和某些版本的 IE 进入刷新循环。因此，我想仅在浏览器大小调整到一定程度后刷新浏览器，看看是否可以解决问题，这就是我在下面尝试做的事情。尽管由于某种原因，浏览器根本不会刷新。计数器工作正常，但 window.location.reload(); 似乎在这里不起作用(在此函数之外工作正常)。关于为什么会这样的任何想法吗？

var $resizeTolerance = 0;
jQuery(window).on("resize", function(){
$resizeTolerance++;
console.log($resizeTolerance);

if($resizeTolerance > 10) {
  window.location.reload();
}
});

Answer 1

我强烈建议不要这样做，尤其是因为您说过您不想“...[尝试]在浏览器打开时重新计算所有这些脚本调整大小...” 但当然这正是您正在做的事情:重新加载页面时，您将重复所有计算。相反，请确保计算是可重复的，然后重复它们。

但除此之外:

您正在寻找的是setTimeout，在用户完成调整浏览器大小后执行某些操作:

var loadedAt = Date.now();
var resizeHandle = 0;
jQuery(window).on("resize", function(){
  if (Date.now() - loadedAt < 300) {
    // ignore
    return;
  }
  if (resizeHandle) {
    clearTimeout(resizeHandle);
  }
  resizeHandle = setTimeout(reloadPage, 100); // 100ms = 1/10th second
});
function reloadPage() {
  window.location.reload();
}

这将等到最后一次调整大小事件发生后十分之一秒，然后触发页面刷新。您可能需要调整时间。

它还会忽略代码连接处理程序后 300 毫秒内的任何调整大小事件，以忽略浏览器显然发送的初始调整大小事件。

Live Example

<小时/>

旁注:这使用 Date.now，此时几乎所有浏览器都具有该功能。您可以在旧版浏览器中对其进行填充，如下所示:

if (!Date.now) {
    Date.now = function() {
        return +new Date();
    }
}