Done Resizing Event

If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

Comments

  1. User Avatar
    Jose Luis Quintana
    Permalink to comment#

    Yeah !
    I know about this fallback in resize window.
    Very appreciated your trick !

  2. User Avatar
    zzzzBov
    Permalink to comment#

    This technique is called “debouncing”. If you happen to be using underscore, the code is quite simple:

    $(window).on('resize', _.debounce(function () {
        // Run code here, debounce delay has passed
    }, 250));
    

    David Walsh wrote up a reasonable overview of how this works.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I mentioned that it’s similar to debouncing at the end of the article. But it’s not quite the same. Debouncing will run it every (whatever) seconds no matter what, slightly different than “wait until you’re done”.

    • User Avatar
      zzzzBov
      Permalink to comment#

      Debouncing will run it every (whatever) seconds no matter what

      You’re thinking of throttling, which will call the function once every (whatever) seconds. Debouncing will either run once at the beginning or end of the series of calls, so long as they happen within (whatever) seconds, but you already knew that.

  3. User Avatar
    Matt
    Permalink to comment#

    Hey Sebastian, glad you found it useful. If you could credit to Matt Perry and PaperShaker uk.paper-shaker.com that’d be excellent.

    Thanks

    Matt

  4. User Avatar
    fcw
    Permalink to comment#

    i think i found a quite simple solution. it also works for scroll-events, …

    $(window).on('resize', function(e)
    {
        // do stuff here
        console.log(!e.isTrigger ? ' resize' : ' triggerd');
    
        if (!e.isTrigger)
        {
            clearTimeout(this._timer);
            this._timer = setTimeout(function(){ $(window).trigger('resize'); }, 250);
        }
    });
    

    This is useful, if you want to trigger the same resize-function after resizing (if you resize very quickly sometimes values don’t update)

  5. User Avatar
    Ken Swarthout
    Permalink to comment#

    I’m new to web page development and I’m having some trouble with some code I’m working on. I need to change a CSS property (I think that’s what it’s called) on the end of a window resize (or I could do it at the beginning I guess). It’s the left property. I have a class called sections and I need to set left: to 0;. I’ve been trying code like this and haven’t had much look with it working. I’ll try this come tomorrow, but I have a quick question. Do I need anything for this code to work? Or do I just have to include jQuery? The other examples I’ve seen just don’t seem to work at all. And I know you said these functions don’t exist in native Javascript but you can fake it using your code…is your code jQuery or is it Javascript? I was under the impression they’re two different things. I thought jQuery was written in Javascript but wasn’t in fact Javascript. It was something different. I’m just a bit confused.

  6. User Avatar
    Ken Swarthout

    Just wanted to thank you for writing a great article. I have successfully incorporated it into my website and it works now. Thank you.

  7. User Avatar
    JEYAKUMAR DEVARAJULU
    Permalink to comment#

    Nice one, it saved my productivity hours…

  8. User Avatar
    Csaba Tuncsik
    Permalink to comment#
    (function ($) {
        var timer = null;
        $(window).bind('resize.resizeEnd', function () {
            if (timer) {
                clearInterval(timer);
            }
            timer = setInterval(function () {
                clearInterval(timer);
                $(window).trigger('resizeEnd');
            }, 250);
        });
    })(jQuery);
    
  9. User Avatar
    james
    Permalink to comment#

    For css3 Transition

    $(‘.target’).on(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, _.debounce(function () {
    console.log(‘Your Code here’)
    }, 250));

  10. User Avatar
    Luca
    Permalink to comment#

    it’s very elegant and effective. Just wonderful

  11. User Avatar
    John
    Permalink to comment#

    Thanks for this!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag