我有以下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)。 TDs 的数组从1到80个元素不等,但效果始终相同。
我做错了什么?
根据要求,JSFiddle链接:http://jsfiddle.net/PsvCP/2/(你必须设置在正文中没有换行)
谢谢,
Ema
答案 0 :(得分:0)
尝试加倍步数,25fps有些不稳定。 加倍步骤应该让你达到50fps,这应该没问题。
同时使elmntlist成为dom元素的数组,而不是元素id的数组, Dom查找非常缓慢并且可能导致您的大部分问题。
答案 1 :(得分:0)
想想我已经解决了这个问题。显然,setTimeout
API在Chrom(ium)和Firefox中都特别慢。在 advance 中调度所有梯度函数调用对于当前的浏览器来说效率更高,并且可以解决问题:
// 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);
}
...
正如预期的那样,它可以更快地运行 lot 。