Your generous donation allows me to continue developing and updating my code!
Using jQuery throttle / debounce, you can pass a delay and function to $.debounce
to get a new function, that when called repetitively, executes the original function just once per "bunch" of calls.
This can be especially useful for rate limiting execution of handlers on events that will trigger AJAX requests. Just take a look at this example to see for yourself!
Typing into a textfield
Give this "pretend autocomplete" field a try. After typing a sentence you'll see why debouncing is a good idea!
The real-world simulation
(No, there is no actual AJAX request happening here, but if there was, that not-debounced version would be killing your server)
The code
$(function(){ var default_text = $('#text-type').text(), text_counter_1 = 0, text_counter_2 = 0; // This function is not debounced, but instead bound directly to the event. function text_1() { var val = $(this).val(), html = 'Not-debounced AJAX request executed: ' + text_counter_1++ + ' times.' + ( val ? ' Text: ' + val : '' ); $('#text-type-1').html( html ); }; // This function is debounced, and the new, debounced, function is bound to // the event. Note that in jQuery 1.4+ a reference to either the original or // debounced function can be passed to .unbind to unbind the function. function text_2() { var val = $(this).val(), html = 'Debounced AJAX request executed: ' + text_counter_2++ + ' times.' + ( val ? ' Text: ' + val : '' ); $('#text-type-2').html( html ); }; // Bind the not-at-all debounced handler to the keyup event. $('input.text').keyup( text_1 ); // Bind the debounced handler to the keyup event. $('input.text').keyup( $.debounce( 250, text_2 ) ); // This is the line you want! // Trigger the callbacks once to show some initial (zero) values. text_1(); text_2(); });