Debounced resize() jQuery plugin

Home > jquery > Debounced resize() jQuery plugin

Debounced resize() jQuery plugin

August 11th, 2009

If you've ever attached an event handler to the window's resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.

PPK lays it out like this:

In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window.

Opera uses as many resize events, but fires them all at the end of the resizing.

Firefox fires one resize event at the end of the resizing.

When I first saw John Hann's debounce post, this use case is what I immediately thought of.

This isn't exactly throttling, but it's close. Basically debouncing will fire your function after a threshold of time (e.g. 100ms) has elapsed since the last time it's tried to fire. Throttling would withhold subsequent firings, but debouncing waits for the last one and runs that.

Take a look at the difference on the demo.

The code for smartresize:

(function($,sr){
 
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
 
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
 
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
 
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	// smartresize 
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
})(jQuery,'smartresize');
 
 
// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});

Pretty straightforward stuff. What else do you think would be an appropriate use of debounce()?

Paul Irish jquery

Comments (9) Trackbacks (1) Leave a comment Trackback

"Cowboy" Ben Alman

#1

Reply

For generalized jQuery-friendly debouncing and polling, interval, and timeout handling, you might want to check out my doTimeout plugin, as it does all this and quite a bit more (with a slightly larger footprint, of course)!

- Ben
unscriptable

#2

Reply

Hey Paul!

Glad you found a great use for debounce(). Interestingly, I find I typically wish for Firefox to fire the resize event more often! (For those few times when I can't quite get a 100% liquid layout with CSS.)

Side note for readers: Set the debounce function's execAsap parameter to true and the event will fire at the beginning of the timeout period, like throttling.

@Ben: your doTimeout plugin is pretty cool. It's unbelievably well documented, too. Kudos!
Brandon Aaron

#3

Reply

For mousemove: http://github.com/brandonaaron/jquery-delayedmousemove
Paul Irish

#4

Reply

@Brandon Aaron Very nice work Brandon. This is solid.
Louis-Rémi Babé

#5

Reply

I just wrote a special event to debounce the resize event. I kept your name "smartresize".
http://github.com/lrbabe/jquery-smartresize/
Tim

#6

Reply

Excellent stuff. It's quite confusing right at first when your browser starts firing waaay too many events. Many thanks for the straightforward tipoff for how to get it working more reasonably.
Eduardo Mello

#7

Reply

I've just changed the bind to scroll and got it working on the scroll event! Thanks
Lee Willis

#8

Reply

Hi Paul,

This looks like a perfect solution to a problem I'm having. I'd love to use this in a GPL Wordpress plugin. Since there doesn't appear to be a code license statement on the blog - can you confirm if this is OK? Feel free to drop me an email if you need any further information.

Thanks
Lee
Tommy

#9

Reply

Hi Paul,

Thank you very much, I have been looking for this for a while.

Tommy