javascript 为什么 IE8 挂在 jquery window.resize 事件上?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5947422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 18:54:22  来源:igfitidea点击:

Why does IE8 hangs on jquery window.resize event?

javascriptjqueryhtmlinternet-explorerresize

提问by Vasile Tomoiaga

I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.

我发现了一个问题,在 IE8 中打开一段 html 和 javascript 时似乎总是会重现。

<html>
    <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).resize(function() {
                console.log('Handler for .resize() called');
            });
        });
    </script>
    <div id="log">
    </div>
    </body>
</html>

Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.

在 IE8 中加载此文件并打开开发人员工具将显示在浏览器窗口大小调整一次后连续打印日志消息。

Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).

有谁知道为什么?这不会发生在 IE7 或 IE9 中,也不会发生在其他浏览器(或至少是它们的最新版本)中。

UPDATE

更新

One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.

如果浏览器是 IE8,防止 resize() 连续触发的一种解决方案是在 document.body.onresize 上添加处理程序。

 var ieVersion = getInternetExplorerVersion();
    if (ieVersion == 8) {
        document.body.onresize = function () {
        };
    }
    else {
        $(window).resize(function () {
        });
    }

But this does not answer my question: is the continuous firing of resize() a bug in IE8?

但这并没有回答我的问题:不断触发 resize() 是 IE8 中的一个错误吗?

回答by Lee Kowalkowski

If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).

如果打开“拖动时显示窗口内容”,您将被调整大小事件淹没。我猜您是在启用此效果的单独 Windows 机器上测试 IE8(显示属性 -> 外观 -> 效果...)。

To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize

为了解决这个问题,您可以包装和捕获调整大小事件以驯服它们:http: //paulirish.com/demo/resize

This article says Chrome, Safari & Opera suffer from this too.

这篇文章说 Chrome、Safari 和 Opera 也受此影响。

回答by brentonstrine

I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the logdiv that you have there, which means that it is resizing the div and triggering the window resize event.

如果页面上的元素被调整大小(如本问题所述),我只会看到您所描述的问题。您的示例对我不起作用,但我假设它是在log您拥有的div 中附加控制台消息,这意味着它正在调整 div 的大小并触发窗口调整大小事件。

The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:

Lee 给出的答案是正确的,但链接中的方法对我不起作用。这是我所做的:

var handleResize = function(){
   $(window).one("resize", function() {
      console.log('Handler for .resize() called');
      setTimeout("handleResize()",100);
   });
}
handleResize();

This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.

这样,处理程序在触发后立即解除绑定,并且仅在您完成可能重新触发页面大小调整的所有操作后才重新绑定。我加入了一个 setTimeout 来提供额外的限制。如果您的脚本需要更多时间,请增加该值。