javascript window.onresize：在调整大小完成期间和完成时触发函数

window.onresize: firing a function during, and when resizing is complete

提问by user763349

I'm new to JavaScript. I am trying to figure out how I would create an onresize function to fire a function during and another one after the user is done resizing the window. Most likely a session timeout will occur.

我是 JavaScript 的新手。我试图弄清楚我将如何创建一个 onresize 函数来在用户完成窗口大小调整期间和另一个之后触发一个函数。很可能会发生会话超时。

Any ideas on writing a basic function?

关于编写基本函数的任何想法？

<script type="text/javascript">
    window.onresize = function () {
    // The first function goes here while resizing is happening
    // Then function 2 occurs when window resizing is finished by the user
    }    
</script>

Here is the modified version of what I am attempting. The goal is to hide the main capsule div on a page while the page is resizing. Initially when the onresize event is triggered is turns on a div's visibility to be a stand by screen saying "please wait while we process the information".

这是我正在尝试的修改版本。目标是在页面调整大小时隐藏页面上的主胶囊 div。最初，当 onresize 事件被触发时，会打开一个 div 的可见性，使其成为一个备用屏幕，说“请稍等，我们正在处理信息”。

The Script Exp:

脚本经验：

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
         document.getElementById("loading").className = "loading-visible";
         document.getElementById('XXXDIV').style.visibility = 'hidden';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'hidden';
                 }
    resizeTimeout = setTimeout(function() {
            var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";};
            var oldLoad = window.onload;
            var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
            location.reload(true) = newLoad;
            document.getElementById('XXXDIV').style.visibility = 'visible';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'visible';
                 }
    }, 2000); // set for 1/4 second.  May need to be adjusted.
};

</script>

回答by OverZealous

This should do it:

这应该这样做：

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
        // handle normal resize
        resizeTimeout = setTimeout(function() {
            // handle after finished resize
        }, 250); // set for 1/4 second.  May need to be adjusted.
    };

Here's a working example for doubters: http://pastehtml.com/view/b2jabrz48.html

这是怀疑者的工作示例：http: //pastehtml.com/view/b2jabrz48.html

回答by VIK

On the jQuery website there is a comment to resize event:

在 jQuery 网站上有一条关于调整大小事件的评论：

Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

根据实现，resize 事件可以在调整大小进行时连续发送（Internet Explorer 和基于 WebKit 的浏览器（如 Safari 和 Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（在其他一些浏览器，例如 Opera）。

回答by Lance

You're not going to get that event to fire while resizing is happening, because the event doesn't fire until after resizing has taken place.

您不会在调整大小时触发该事件，因为在调整大小发生之前该事件不会触发。

MDN Reference:

MDN 参考：

**NOTE:**

**NOTE:**

The resize event is fired after the window has been resized.

The resize event is fired after the window has been resized.