window.onresize：在调整大小时以及调整大小时触发函数

Question

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.

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".

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>

Answer 1

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

Answer 2

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

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).

Answer 3

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:

**NOTE:**

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