Using jQuery throttle / debounce, you can pass a delay and function to $.throttle to get a new function, that when called repetitively, executes the original function (in the same context and with all arguments passed through) no more than once every delay milliseconds.

This can be especially useful for rate limiting execution of handlers on events like resize and scroll. Just take a look at the examples to see for yourself!

Window resize (some browsers fire this event continually)

resize handler executed: 0 times (1ms since previous execution)
window dimensions: 1280x720

throttled resize handler executed: 0 times (2ms since previous execution)
window dimensions: 1280x720

The code

view sourceprint?
01.$(function(){
02.   
03.  var counter_1 = 0,
04.      counter_2 = 0
05.      last_time_1 = +new Date(),
06.      last_time_2 = +new Date();
07.   
08.  // This function is not throttled, but instead bound directly to the event.
09.  function resize_1() {
10.    var now = +new Date(),
11.      html = 'resize handler executed: ' + counter_1++ + ' times'
12.      + ' (' + ( now - last_time_1 ) + 'ms since previous execution)'
13.        + '<br/>window dimensions: ' + $(window).width() + 'x' + $(window).height();
14.     
15.    last_time_1 = now;
16.     
17.    $('#text-resize-1').html( html );
18.  };
19.   
20.  // This function is throttled, and the new, throttled, function is bound to
21.  // the event. Note that in jQuery 1.4+ a reference to either the original or
22.  // throttled function can be passed to .unbind to unbind the function.
23.  function resize_2() {
24.    var now = +new Date(),
25.      html = 'throttled resize handler executed: ' + counter_2++ + ' times'
26.        + ' (' + ( now - last_time_2 ) + 'ms since previous execution)'
27.        + '<br/>window dimensions: ' + $(window).width() + 'x' + $(window).height();
28.     
29.    last_time_2 = now;
30.     
31.    $('#text-resize-2').html( html );
32.  };
33.   
34.  // Bind the not-at-all throttled handler to the resize event.
35.  $(window).resize( resize_1 );
36.   
37.  // Bind the throttled handler to the resize event.
38.  $(window).resize( $.throttle( 250, resize_2 ) ); // This is the line you want!
39.   
40.});

Window scroll (some browsers fire this event continually)

scroll handler executed: 0 times (1ms since previous execution)
window scrollLeft: 0, scrollTop: 0

throttled scroll handler executed: 0 times (1ms since previous execution)
window scrollLeft: 0, scrollTop: 0

The code

view sourceprint?
01.$(function(){
02.   
03.  var counter_1 = 0,
04.      counter_2 = 0
05.      last_time_1 = +new Date(),
06.      last_time_2 = +new Date();
07.   
08.  // This function is not throttled, but instead bound directly to the event.
09.  function scroll_1() {
10.    var now = +new Date(),
11.      html = 'scroll handler executed: ' + counter_1++ + ' times'
12.        + ' (' + ( now - last_time_1 ) + 'ms since previous execution)'
13.        + '<br/>window scrollLeft: ' + $(window).scrollLeft() + ', scrollTop: ' + $(window).scrollTop();
14.     
15.    last_time_1 = now;
16.     
17.    $('#text-scroll-1').html( html );
18.  };
19.   
20.  // This function is throttled, and the new, throttled, function is bound to
21.  // the event. Note that in jQuery 1.4+ a reference to either the original or
22.  // throttled function can be passed to .unbind to unbind the function.
23.  function scroll_2() {
24.    var now = +new Date(),
25.      html = 'throttled scroll handler executed: ' + counter_2++ + ' times'
26.        + ' (' + ( now - last_time_2 ) + 'ms since previous execution)'
27.        + '<br/>window scrollLeft: ' + $(window).scrollLeft() + ', scrollTop: ' + $(window).scrollTop();
28.     
29.    last_time_2 = now;
30.     
31.    $('#text-scroll-2').html( html );
32.  };
33.   
34.  // Bind the not-at-all throttled handler to the scroll event.
35.  $(window).scroll( scroll_1 );
36.   
37.  // Bind the throttled handler to the scroll event.
38.  $(window).scroll( $.throttle( 250, scroll_2 ) ); // This is the line you want!
39.   
40.});