Javascript 为什么当我给它分配一个超时的处理程序时,resize事件不断地触发?
我为window.resize处理程序分配了一个超时,这样我就不会在每次启动resize事件时调用我的大小调整代码。我的代码如下所示:Javascript 为什么当我给它分配一个超时的处理程序时,resize事件不断地触发?,javascript,internet-explorer-7,timeout,onresize,Javascript,Internet Explorer 7,Timeout,Onresize,我为window.resize处理程序分配了一个超时,这样我就不会在每次启动resize事件时调用我的大小调整代码。我的代码如下所示: <script> function init() { var hasTimedOut = false; var resizeHandler = function() { // do stuff return false; }; window.onresize = function() { if (hasTim
<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...
函数init(){
var Hastinmedout=假;
var resizeHandler=函数(){
//做事
返回false;
};
window.onresize=函数(){
if(hastinmedout!==false){
清除超时(清除超时);
}
Hastinmedout=setTimeout(resizeHandler,100);//100毫秒
};
}
...
等
在IE7(可能还有其他版本)中,执行此操作时,resize事件似乎会不断触发。更准确地说,它将在每一个超时时间后触发——在本例中为100毫秒
你知道为什么或者如何阻止这种行为吗?我真的不想为在一次调整大小中触发的每个调整大小事件调用我的调整大小代码,但这更糟糕。在//do stuff代码中,您是否操纵了任何顶部、左侧、宽度、高度、边框、边距或填充属性 您可能无意中触发了递归,但无意中触发了递归,无意中触发了递归…
另外,请参见您的…属性中“scunliffe”的答案?IE确实在进行调整大小时不断触发其调整大小事件(您必须知道,因为您已经在实施修复超时) 我能够使用您的代码在我的测试页面上复制您看到的结果 但是,如果我将超时时间从100增加到1000,问题就会消失。您可能希望尝试使用不同的等待值,看看什么对您有效
:它已经设置了一个非常动态的等待时间供您使用。我偶然发现了相同的问题,但以不同的方式解决了它,我认为它比超时更优雅 上下文:我有一个iframe页面,加载在父页面中,当其大小改变时,iframe必须通知父页面,以便父页面可以相应地调整iframe的大小-实现iframe的动态调整 因此,在iframed HTML文档中,我尝试在body标记上注册回调。首先,在onchange上-它不起作用。然后在resize上-它起作用,但不断地触发。(后来我找到了原因-显然是Firefox中的一个bug,它试图将我的页面扩展到无限大).我试过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>
var v=0;
const docResizeObserver=新的ResizeObserver(()=>{
docResizePipe();
});
docResizeObserver.observe(document.querySelector(“body”);
函数docResizePipe(){
v+=1;
如果(v>5){
返回;
}
var w=document.body.scrollWidth;
var h=document.body.scrollHeight;
window.parent.postMessage([w,h],“*”);
}
setInterval(函数(){
v-=1;
if(v<0){
v=0;
}
}, 300);
它的工作原理是:每次回调触发时,我们增加一个变量v;每300毫秒减少一次;如果它太大,则触发被阻止
与基于超时的解决方案相比,这一解决方案的最大优势在于,它引入了用户体验的滞后,并且清楚地知道它是如何阻止递归的))没有。我所做的只是添加一些div…这些div都不会导致页面内容的宽度/高度改变到导致垂直或水平滚动条出现/消失的程度?;-)这也会导致IE重新触发调整大小事件。我认为你部分正确。它们不会使滚动条出现或消失绘制div似乎是对窗口做了一些事情,使其触发调整大小事件。当我用一些实际上不起任何作用的伪函数替换div绘图时,我不再看到不断触发调整大小事件。谢谢,但我的限制之一是我不能使用JQuery(或任何其他框架):(也许我可以弄清楚JQuery实际上在做什么,并为自己实现它。准确地说,我发现这个链接对您很有用,至少可以获取代码并使用它。这个链接不再起作用了。我在您的测试页面中没有看到这种行为。