Done Resizing Event

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.