JavaScript setTimeout() slows down under heavy load

Question

I've created a script that fades the background color of an element. I use setTimeout() to make an incremental change to the color every 5 ms. The script works great if I'm just fading the background color of one thing at a time, but if I've got, say, 50 elements I'm all fading at once, the speed is much slower than 5 ms because of all the concurrent setTimeout()s running at once. A fade that normally should execute in 1 second, for example, may take 30 seconds if I'm fading 50 elements at once.

Any ideas how I can overcome this?

Here's the script in case anyone has an ideas:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
     = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

It's used like this:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

Answer 1

Here is an article from Google where the author discusses their work on timers for Gmail. They found that having a single high-frequency timer was faster than using multiple timers if they had heavy and rapid timer use.

You could have one timer that fires every 5ms, and add all of your elements that need to be faded to a data structure that tracks where they are in the fading process. Then your one timer can look through that list and perform the next fade for each element each time it is triggered.

On the other hand, have you tried using a library like Mootools or JQuery rather than rolling your own animation framework? Their developers have put a lot of work into optimizing these kinds of operations.

Answer 2

In addition to the other answers, here's an excellent article by John Resig about timers: http://ejohn.org/blog/how-javascript-timers-work/