jQuery: responsiveness plugin for fast UI

for demo go here

Problem:
I was working on a dropdown widget where the user could scroll down using the arrow keys, and while he was scrolling, two things needed to happen:

1. UI need to be updated, showing his new selection, and removing his old selection.
2. Some costly DOM operations had to happen in the background to set the selected item in the widget.
   

I noticed that the scrolling was slow in IE6 on a P3-1000. Mind you, scrolling 1 item was fast, but holding down the arrow key and scrolling 50 items was painfully slow, because the DOM operations had to happen for every item scrolled.
I also knew that i only really needed to do the DOM operations for the last item selected, that is the one the user really wanted.


Solution:
Javascript is single threaded, but there is a timer function that makes faking multi-threaded execution possible.
What i needed to do was to split up the scroll function into two components, first call the UI update every time the arrow was pressed, and second, queue up the expensive DOM operations to happen in the future, but dont execute them until no new DOM operations have been queued for some interval of time. This would give the user the visual feedback of "something is happening" while not executing the costly operation that would make everything feel slow and unresponsive.

The plugin i came up with lets you specify the interval that you will wait for further requests until you execute the last request, and the number of times you will wait that interval.


One thing to be aware of is that this plugin does not implement any queing internally, so if you should only use one instance of it per function. make a new instance if you want to improve the performance of a different function.

For more info such as:

• A simple typing demo
• A crappy implementation of hoverIntent plugin
• API

go here