我有以下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)
谢谢,
艾玛