jQuery Capture Window Resize on End Event

Sam Deering

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);
    });
});

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • 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()…

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