Question

我运行了以下代码

$(document).ready(function() {

    var ivar = 0;

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

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

任何人都可以告诉我在resize事件中发生的事情，使得计数器增加两倍

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

由于

Answer 1

这是众所周知的问题。在某些浏览器中，resize被调用两次。我们可以创建计时器，这样只有当用户停止调整窗口大小时它才会调用我们的函数。这是你如何做到的：

var globalTimer = null;

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

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

Answer 2

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

如果通过双击最大化浏览器窗口，甚至可能会发生这种情况。 OS可以决定对窗口内容进行动画处理，向浏览器发送多个调整大小事件。想要精确重绘的浏览器可能会进一步传播事件，因此即使动画非常快，也会导致双重调整大小。

如Kir Ivlev所示，您可以在每次调整大小后稍等一会儿，看看是否发生了另一次调整大小。如果是，请延长等待（停止等待并再次等待）

Window调整大小事件在jQuery中触发两次

2 个答案: