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を設定する必要があります)

ありがとう、
エマ

4

2 に答える 2

0

ステップの量を 2 倍にしてみてください。25 fps はやや不安定です。ステップを 2 倍にすると 50 fps になり、問題ありません。

また、elmntlist を要素 ID の配列ではなく、dom 要素の配列にします。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 に答える