7

我运行了下面的代码

$(document).ready(function() {

    var ivar = 0;

    $(window).resize(function() {
        console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);
    });
});​

每当我调整大小时，我发现事件触发了两次，即计数器“ivar”增加了两次。

谁能告诉我在调整大小事件中发生了什么使计数器增加两次

* *编辑： 1. 我通过双击窗口栏来调整窗口大小。

谢谢

4

2 回答 2

9

这是众所周知的问题。在某些浏览器中，调整大小会被调用两次。我们可以创建计时器，这样它只会在用户停止调整窗口大小时调用我们的函数。以下是您的操作方法：

var globalTimer = null;

$(window).resize(function() {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(doneResize, 500);
});

function doneResize(){
  console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);   
}​
于 2012-11-06T05:08:02.523 回答
6

resize每当窗口调整大小时都会触发该事件。无法保证触发事件的频率。浏览器可能决定在鼠标光标拖动角落时立即触发调整大小，并一直这样做，直到释放鼠标，以便它可以连续重绘内容。最后一个事件是释放鼠标按钮时计数的事件。

如果通过双击最大化浏览器窗口，甚至可能发生这种情况。操作系统可能决定为窗口内容设置动画，向浏览器触发多个调整大小事件。想要准确重绘的浏览器可能会进一步传播事件，从而即使动画非常快也会导致双重调整大小。

正如Kir Ivlev建议的那样，您可以在每次调整大小后稍等片刻，看看是否会发生另一个调整大小。如果是，请延长等待（停止等待并再次等待）

于 2012-11-06T05:20:57.597 回答