0

JavaScript を使用してページ上のいくつかの要素をアニメーション化しようとしています (スプライトを使用した CSS アニメーションは、私が必要としているものには機能しません)。

私は現在、このようなことをしています。

function animate_element(current_id)
{
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }     

    setTimeout(function() {
        animate_element(next_id);
    }, 750);
}

技術的にはこれでうまくいきますが、これは同じようなことをするページ上の多くのアニメーションの 1 つになり、非効率的な方法ではないかと心配しています。

setTimeout を呼び出す前に使用するのがベスト プラクティスであることclearTimeout()はわかっていますが、setTimeout を記録して再帰的にそれ自体に渡す方法がわかりません (意味がある場合)。

これを行うためのベスト プラクティスの方法に関するガイダンスをいただければ幸いです。

4

3 に答える 3

2

clearTimeout()「 setTimeout を呼び出す前に使用することをお勧めします...」

あなたがしていることについてはclearTimeout()、最後の呼び出しが実行されるまで次の呼び出しが発生しないため、呼び出す理由はありません。

その時点で、クリアするものは何もありません。

FWIW、あなたのコードは少し短くすることができます：

function animate_element(current_id) {
    current_id = parseInt(current_id, 10);

    function cycle() {
        document.getElementById('lighthouse').src = '/element_' + current_id + '.png';
        current_id = ++current_id % 8
        setTimeout(cycle, 750);
    }
}

animate_element(0);

または、ID が異なるだけで同じものが複数ある場合は、次のように再利用可能にできます。

function animate_element(id, idx) {
    idx = parseInt(idx, 10);

    function cycle() {
        document.getElementById(id).src = '/element_' + idx + '.png';
        idx = ++idx % 8
        setTimeout(cycle, 750);
    }
}

animate_element('lighthouse', 0);
于 2012-10-30T21:34:01.027 に答える
1

setIntervalあなたの場合はもっと良いと思いsetTimeoutます。

var current_id = 0;

function animate_element() {
  setInterval(function() {
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }

    current_id = next_id;
  }, 750);
}
于 2012-10-30T21:39:22.390 に答える
1

あなたのコードやあなたがしていることをよく見ていませんでしたが、値を保持したい場合は、変数を閉じることができます:

var animate_element = (function(){

   var timer;

   return function(current_id)
   {
       var next_id = parseInt(current_id, 10) + 1;
       $('#lighthouse')[0].src = '/element_' + next_id + '.png';

       if (next_id >= 8) {
           next_id = 0;
       }     

       clearTimeout(timer);
       timer = setTimeout(function() {
          animate_element(next_id);
       }, 750);
   };

})();
于 2012-10-30T21:35:35.147 に答える