Two methods to capture a resize event on a window, but how to capture the event once the user has finished resizing the window? A little trick is to use a setTimeout() with clearTimeout() and optimal duration is 250 even captures slowish window resizes smoothly. See Window resize examples for how you might use them.

Method 1

$(window).bind('resize', function(e)
 {
     //do something
});

Method 2

$(window).resize( function(e)
{
    //do something
});

Method 2 with timeout

$(window).bind('resize', function(e)
{
    window.resizeEvt;
    $(window).resize(function()
    {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function()
        {
            //code to do after window is resized
        }, 250);
    });
});
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Pingback: jQuery Capture Window Resize on End Event » PHP Script Blog()

  • kilian

    Great solutions!

    Why do you have the resize listener twice on “method 2 with timeout” ?
    $(window).bind(‘resize’, function(e)….

    $(window).resize(function()…

    • Spork Schivago

      I wish you got an answer. I too wonder why. I can’t get the code to work properly and I wonder if this is why. :(

      • James Hibbard

        I have no idea why the author used bind and resize. It looks like a mistake to me.
        In any case, using modern jQuery syntax, this should do what you want:

        var resizeEvt;
        $(window).on("resize", function() {
        clearTimeout(resizeEvt);
        resizeEvt = setTimeout(function() {
        console.log("hi");
        }, 250);
        });

        If you want to discuss this some more, why not post a question in our JavaScript forum?
        http://community.sitepoint.com/c/javascript

  • http://www.sharkattackdata.com/ SharkAttackData

    Method 2 with timeout does the trick–thanks.

    I made a couple minor changes: I declared resizeEvt in the parent scope (i.e. outside the .bind() call). This way it avoids putting a variable in the global namespace in case I want to apply this method elsewhere.

    One more change was to use .on() instead of .bind(), which is now the preferred way of attaching an event handler.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.