Javascript 以平滑的方式设置背景色

我有以下JS代码：

// utility function to convert r,g,b to html color
function RGB2HTML(red, green, blue) {
    var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
    return '#'+decColor.toString(16).substr(1);
}

// recursive utility function to animate color
// elNames an array of Ids (these are mainly TDs)
// curCnt is current animation step
// totSteps is total steps
function pulseBGMany(elNames, curCnt, totSteps) {
    for(var i=0; i < elNames.length; ++i) {
        var curEl = document.getElementById(elNames[i]);
        var curColor = RGB2HTML(255, 255*(curCnt/totSteps), 255*(curCnt/totSteps));
        curEl.style.backgroundColor = curColor;
    }
    if(curCnt < totSteps) {
        setTimeout( function(){ pulseBGMany(elNames, curCnt+1, totSteps); }, 40);
    }
}

// eventually in another piece of code, it all gets triggered
...
// schedule ui update here!
// use a closure
(function(names){ setTimeout( function(){ pulseBGMany(names, 0, 25); }, 40)})(diffRes);
...

//将r、g、b转换为html颜色的实用函数
函数RGB2HTML（红色、绿色、蓝色）{
var DECCLOR=0x1000000+蓝色+0x100*绿色+0x10000*红色；
返回“#”+decColor.toString（16）.substr（1）；
}
//用于设置颜色动画的递归实用程序函数
//elNames一组ID（主要是TDs）
//curCnt是当前动画步骤
//总步数是总步数
函数pulseBGMany（elNames、curCnt、totSteps）{
对于（变量i=0；i

上面的代码可以工作，但不幸的是，动画被切碎了，我无法看到从红色到白色的平滑渐变；似乎所有主流浏览器都在丢失帧（在Firefox和Ubuntu上的Chromium上进行了测试）。 TDs的阵列从1个元素到80个元素不等，但效果始终相同

我做错了什么

根据请求，JSFiddle链接：（必须在body中设置No wrap）

谢谢，

---

Ema

尝试将步数加倍，25fps有些波动。 增加一倍的步数可以使你的速度达到每分钟50帧，这应该是很好的

还要使elmntlist成为dom元素的数组，而不是元素id的数组，

---

Dom查找速度非常慢，可能会导致大多数问题。

我想我已经解决了。显然，

setTimeout

API在Chrom（ium）和Firefox中都特别慢。提前安排所有梯度函数调用对于当前浏览器来说效率更高，并且实现了以下目的：

// non-recursive utility function to animate color
function pulseBGMany(elNames, curCnt, totSteps) {
  var curColor = RGB2HTML(255, 255*(curCnt/totSteps), 255*(curCnt/totSteps));
  for(var i=0; i < elNames.length; ++i) {
    elNames[i].style.backgroundColor = curColor;
  }
}

...
  // schedule ui update here!
  // use a closure
  var numFade = 15;
  for(var i=0; i < numFade; ++i) {
    (function(names, iter, tot){ setTimeout( function(){ pulseBGMany(names, iter+1, numFade); }, 50*iter)})(diffRes, i, numFade);
  }
...

//用于设置颜色动画的非递归实用程序函数
函数pulseBGMany（elNames、curCnt、totSteps）{
var curColor=RGB2HTML（255，255*（curCnt/totSteps），255*（curCnt/totSteps））；
对于（变量i=0；i

---

正如预期的那样，这会快得多。

您是否坚决反对使用jQuery？它有

animate（）

和

pulse（）

方法，这些方法正是您要寻找的。在使用jQuery之前，我想了解一些事情。除此之外，我可能不需要在这个简单的网页中使用整个jQuery。抱歉，伙计，这个问题不是关于jQuery的。你能设置一个简单的JSFIDLE吗？如果我们能看到这样的问题，就更容易解决：D@godfrzero完成！谢谢当你说“dom元素数组”时，你的意思是我应该用

文档的输出来创建数组。getElementById（…）

？将步骤加倍，超时减半，使用dom元素数组，但波动性并没有消失。。。