2

我为我的 window.resize 处理程序分配了一个超时，这样我就不会在每次触发 resize 事件时调用我的大量调整大小代码。我的代码如下所示：

<script>
function init() {
  var hasTimedOut = false;
  var resizeHandler = function() {
    // do stuff
    return false;
  };

  window.onresize = function() {
    if (hasTimedOut !== false) {
      clearTimeout(hasTimedOut);
    }
    hasTimedOut = setTimeout(resizeHandler, 100); // 100 milliseconds
  };
}
</script>
<body onload="init();">
...
etc...

在 IE7（以及可能的其他版本）中，当您执行此操作时，resize 事件似乎会不断触发。更准确地说，它会在每个超时持续时间后触发——在这种情况下为 100 毫秒。

任何想法为什么或如何阻止这种行为？我真的不想为在单个调整大小中触发的每个调整大小事件调用我的调整大小代码，但这更糟。

4

4 回答 4

2

在您的 //do stuff 代码中，您是否操作了任何顶部、左侧、宽度、高度、边框、边距或填充属性？

您可能无意中触发递归，无意触发递归，无意触发递归......

于 2009-08-11T20:59:35.897 回答
0

如何修复 IE 中的调整大小事件

另外，请参阅“scunliffe”的答案“在您的...属性中？

于 2009-08-11T21:22:07.817 回答
0

IE 确实在调整大小时会不断触发其调整大小事件（您必须知道，因为您已经为修复实现了超时）。

我可以在我的测试页面上使用您的代码复制您看到的结果。

但是，如果我将超时时间增加到 1000 而不是 100，问题就会消失。您可能想尝试使用不同的等待值来查看适合您的方法。

这是我使用的测试页面：它已经设置了一个很好的动态等待期供您使用。

于 2009-08-11T21:24:33.193 回答
0

我偶然发现了同样的问题，但以不同的方式解决了它，我认为它比超时更优雅......

上下文：我有一个 iframe 页面，加载在父页面内，当 iframe 的大小发生变化时，iframe 必须通知父级，因此父级可以相应地调整 iframe 的大小 - 实现 iframe 的动态调整大小。

因此，在 iframed HTML 文档中，我尝试在 body 标记上注册一个回调。首先，在 onchange - 它没有工作。然后在调整大小 - 它确实有效，但不断射击。（后来我找到了原因 - 这显然是 Firefox 中的一个错误，它试图将我的页面扩大到无限大）。我尝试了 ResizeObserver - 无济于事，同样的事情发生了。

我实施的解决方案是这样的：

<body onload="docResizePipe()">
<script>
var v = 0;
const docResizeObserver = new ResizeObserver(() => {
    docResizePipe();
});
docResizeObserver.observe(document.querySelector("body"));
function docResizePipe() {
    v += 1;
    if (v > 5) {
        return;
    }
    var w = document.body.scrollWidth;
    var h = document.body.scrollHeight;
    window.parent.postMessage([w,h], "*");
}
setInterval(function() {
    v -= 1;
    if (v < 0) {
        v = 0;
    }
}, 300);
</script>

那么它是如何工作的：每次回调触发时，我们都会增加一个变量 v；每 300 毫秒一次，我们将其递减一次；如果它太大，则射击被阻止。

与基于超时的解决方案相比，它的最大优势在于它为用户体验引入了延迟，并且还清楚地表明了它是如何阻止递归的。（好吧，实际上不是）））

于 2021-04-11T11:41:37.810 回答