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

First of all your script doesn't take into account that minimal timeout is usually 10-15ms depending on a browser. You can see my post on this topic. Inside you'll find a table for popular browsers and a link to the program that measures it, so you can verify the claim yourself. I am sorry to say but iterations every 5ms is wishful thinking.

Secondly, timers are not interrupts. There is no magic in them — they cannot interrupt whatever is running in the browser and execute their payload. Instead, they will be deferred until the running code finishes and the browser gets back the control and the ability to run timers. Fading 50 elements take time, and I bet it is more than 5ms, especially if you take into account the whole deferred model of the browser: you update DOM, and the browser will update its visual representation … at some point in time.

I want to finish on a positive note:

• Instead of fading out 50 individual elements, try to group them and fade their parent — it can be faster.
• Be more creative at UI. Try to come up with a solution, which doesn't require fading out a lot of independent elements at once.
• Always verify that your background assumptions are correct before designing around them.
• If you can, try to target modern browsers. From my personal experience, Google Chrome is very good with timers, and its JavaScript engine (V8) is extremely fast.