[Old Pedant]

I don't think you understand what this code is doing:

for (var timer = 0; timer < 10; timer++)
{
    setTimeout(function(){fade(timer, preciseResponseAverage, starResponseColor)}, 100);
}

That code is saying "Repeat 10 times: 100 milliseconds from *RIGHT NOW* call the fade function."

It is *NOT* saying "call the fade function 10 times, each time 100 milliseconds after the last".

So all 10 calls to fade( ) are being made...but they are *ALL* being made at essentially the same time.
So the human eye only sees the result of the last call.

But it would be trivial to have it do that:

for (var timer = 0; timer < 10; timer++)
{
    setTimeout(
        function(){ fade(timer, preciseResponseAverage, starResponseColor)}, 
        100*(timer+1)
    );
}

You see that?
The first call to fade will be at 100*(0+1) milliseconds.
The second call to fade will be at 100*(1+1) milliseconds.
...
The 10th call to fade will be at 100*(1+9) milliseconds, or 1 full second later.

Is this the best way to do it? Probably not. But it's workable.