0

我有以下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);
...

上面的代码可以工作，但不幸的是动画被截断了 ，我看不到从红色到白色的平滑渐变；似乎所有主要浏览器都在丢失帧（在 Ubuntu 上的 Firefox 和 Chromium 上测试）。TD的数组从 1 到甚至 80 个元素不等，但效果始终相同。

我究竟做错了什么？

根据要求，JSFiddle 链接： http: //jsfiddle.net/PsvCP/2/（您必须设置No wrap in body）

谢谢，
艾玛

4

2 回答 2

0

尝试将步数加倍，25fps 有点不稳定。将步数加倍应该可以使您达到 50fps，这应该没问题。

还要让 elmntlist 成为一个 dom 元素数组，而不是一个元素 id 数组，Dom 查找真的很慢，可能会导致你的大部分问题。

于 2013-08-03T08:30:10.253 回答
0

想我已经解决了。显然，该setTimeoutAPI 在 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);
  }
...

正如预期的那样，这工作得更快。

于 2013-08-10T17:07:01.377 回答