Window.onresize: Firing A Function During, And When Resizing Is Complete

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

Solution 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

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

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