jQuery.debounce = function(callback, delay) {
var timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(callback, delay);
}
}

jQuery.throttle = function(callback, delay) {
var prev = new Date().getTime() – delay;
return function() {
var now = new Date().getTime();
if (now – prev > delay) {
prev = now;
callback.call();
}
}
}

@PieturP: thanks for the heads-up on the ExtJS implementation. I’ll check it out!

@Mourner ad @RoryH: thanks for the kudos!

@steida: I don’t know why you think that setTimeout is so brittle. Care to elaborate? Btw, your implementation only works if the triggering event is guaranteed to occur at least once after the delay expires. The solutions presented by Mourner and I are “guaranteed” to execute once — unless, of course, you think that setTimeout is too “brittle” to guarantee anything.

PS: in comments doesn't work.

Thanks for sharing!

Function.prototype.limitExecByInterval = function(time) {
var lock, execOnUnlock, args, fn = this;
return function() {
args = arguments;
if (!lock) {
lock = true;
var scope = this;
setTimeout(function(){
lock = false;
if (execOnUnlock) {
args.callee.apply(scope, args);
execOnUnlock = false;
}
}, time);
return fn.apply(this, args);
} else execOnUnlock = true;
}
}

I found I was writing this sort of functionality at least once in every project. Before I made it a core function, though, it was much harder for a subsequent programmer to figure out what was happening. Calling myFunc.debounce() is much much clearer, imho, than setTimeout().

@mdmadph: Agreed! For user-oriented actions, somewhere around 500 msec is a good starting point.

@TomMahieu: this debounce function could be used as is in your case if the debounced method checked for minimal characters. It also wouldn’t be too hard to extend the debounce function to take an additional Boolean function to check additional rules before firing the debounced method.

We’ve actually written a dojo component that does a similar thing. We’ve developed a TextBox that we use for simple searches: 1 search field that performs an xhr request as you type (no “Go” button click required, we respond on keyup events). Much like Apple’s spotlight search box for example, but in a web context.

The dojo component is configurable in 2 parameters: the delay, and the amount of characters that must be minimally typed before a request is sent. Some keypresses are filtered out (such as arrow keys, function keys).

You can find the code here [code.google.com]