Filtery Redux

Filtery is a beautiful piece of code by Justin Whitford that I came across back when it was new (Feb 2003!) and have used it in various projects since.

In a recent project, the number of items to be filtered was large enough that the browser noticeably slowed down during the script execution. As originally presented, the script is called by the onkeyup and onchange events. The slow-down effect was compounded as the script was triggered after every keystroke.

We came up with a very simple idea to alleviate the problem, by writing a simple wrapper function calling the setTimeout and clearTimeout methods:

var v;

function filteryTimer(pattern, list) {
    clearTimeout(v);
    v = window.setTimeout(function() {filtery(pattern, list);}, 200);
}

The delay before the script executes is set to 200 ms, or 0.2 seconds. This was the value we arrived at after a bunch of trial and error, offering a fair balance between the necessary delay and the illusion of interactivity.

The original article can be found on evolt.org.

Edit: Justin has an updated article on his site.