JavaScript setTimeout() 在重负载下变慢

Question

我创建了一个使元素背景颜色变淡的脚本。我使用 setTimeout() 每 5 毫秒对颜色进行一次增量更改。如果我一次只淡化一个事物的背景颜色，脚本会很好用，但是如果我有，比如说，50 个元素，我一次全部淡化，速度比 5 毫秒慢得多，因为所有同时运行的并发 setTimeout()。例如，通常应该在 1 秒内执行的淡化，如果我一次淡化 50 个元素，则可能需要 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);

Answer 1

这是一个 article来自 Google，作者在其中讨论了他们在 Gmail 计时器方面的工作。他们发现，如果使用大量且快速的定时器，使用单个高频定时器比使用多个定时器更快。

您可以有一个每 5 毫秒触发一次的计时器，并将所有需要淡出的元素添加到一个数据结构中，该数据结构跟踪它们在淡出过程中的位置。然后您的计时器可以查看该列表并在每次触发时为每个元素执行下一个淡入淡出。

另一方面，您是否尝试过使用像 Mootools 这样的库？或 JQuery而不是推出自己的动画框架？他们的开发人员已投入大量工作来优化这些类型的操作。