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

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

但顺便说一句：

您要找的是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();
}

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

它还会在代码挂钩处理程序的300ms内忽略任何resize事件，忽略浏览器显然发送的初始resize事件。

Live Example

附注：这使用Date.now，此时几乎所有浏览器都有。您可以在旧版浏览器中对其进行填充：

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

刷新浏览器一定量后调整大小

1 个答案: