JavaScript setTimeout()在重载情况下会变慢

我创建了一个脚本,可以淡出元素的背景色。我使用setTimeout()每5毫秒对颜色进行一次增量更改。如果我一次只淡出一件东西的背景颜色,脚本效果会很好,但是如果我有50个元素,我会一次全部淡出,速度会比5毫秒慢得多,因为所有并发setTimeout()同时运行。例如,如果一次淡入50个元素,通常应在1秒内执行的淡入可能需要30秒。

有没有办法克服这个问题?

以下是脚本,以防有人有想法:

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] + ")";
    }
}

它是这样使用的:

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