Question

我刚注意到，只要调整浏览器窗口的大小，jquery resize事件就会触发两次。我找不到任何将此列为默认行为的文档。我已经使用jQuery 1.4和1.5在最新版本的Chrome和Firefox中对此进行了测试。

有没有其他人看到这种行为？是否有特定原因？

更新：如果我单击浏览器窗口上的最大化按钮一次，就会发生这种情况。我知道如果我手动将窗口拖动到不同的大小，事件将被多次触发，但最大化按钮不应该是这种情况。

使用的代码测试如下。浏览器调整大小的文本输出两次：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
    $(window).resize(function(){
        console.log('Browser Resized');
    });
</script>
<body>

</body>
</html>

Answer 1

JQuery: How to call RESIZE event only once it's FINISHED resizing?

显示至少有其他人遇到此问题。在1.3.2中，由于事件系统的某些内容，它被列为错误：http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html

Answer 2

这不是jQuery的问题。这取决于浏览器的实现。浏览器决定何时触发'调整大小'。您可以使用window.onresize = function（）{...}进行测试。它会是一样的。与jQuery无关。我测试了Win7 chrome，它被激发了两次，而在Win7 opera / safari中它被触发了一次。

Answer 3

以下是使用setTimeout解决问题的简单方法。

<强>的jQuery

var resizeTimeout
$(window).resize(function(){
    clearTimeout(resizeTimeout)
    resizeTimeout = setTimeout(function(){
        console.log("resized")
    },100)
});

<强>的JavaScript

var resizeTimeout
window.addEventListener("resize", function(){
    clearTimeout(resizeTimeout)
    resizeTimeout = setTimeout(function(){
        console.log("resized")
    },100)
})

Answer 4

这个问题似乎与jquery和浏览器的实现都没有联系。实际上，如果您运行的第二个函数是javascript纯函数，也会发生故障。一个可能的解决方案是，在一个单独的窗口中进入DevTools码头工人，这样做在大多数情况下，您不会两次遇到resize事件。我的确是因为调整窗口大小时，Devtool泊坞窗也重新调整了大小并触发了resize事件，但显然不是确定性的。您可以在没有console.log的情况下尝试使用此代码。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
        <html>
            <head>
                <title></title>

                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
            </head>

            <style>
                body {
                    height: 1000px;
                }
            </style>

            <script type="text/javascript">
                count=0
                $(window).resize(function(){
                    count++
                    document.body.innerHTML = 'Browser Resized ' + count
                    //console.log('Browser Resized ' + count);
                })
            </script>

            <!--script type="text/javascript">
              count=0
              window.addEventListener( 'resize', function(){
                  count++
                  document.body.innerHTML = 'Browser Resized ' + count
                  //console.log('Browser Resized ' + count);
              })
            </script-->
            <body>
            </body>
</html>

Answer 5

我测试了本案例，我也接到了两个电话。所以我认为，等等...这是一个错误，不是吗，它是一个在聚类函数调用之前/之后... 我将回到JQuery的文档中来调整resize（）：

调整大小处理程序中的代码绝不应该依赖于调用处理程序的次数。根据实施情况，调整大小事件可以在调整大小正在进行时连续发送（在Internet Explorer和基于WebKit的浏览器（如Safari和Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（典型行为在其他一些浏览器，如Opera）。

还有其他必要的词吗？

为什么jQuery会重启事件两次？

5 个答案: