0

システム クロックを使用して Javascript で簡単なアニメーションを作成しようとしています。間隔[0],[1],[2]...で呼び出されるように配列を循環させたい。以前のスタック オーバーフローの回答500msの例を使用して、このコード スニペットを試していました。

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*1000)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },500); // the smaller this number, the more accurate the timer will be
}

関数は、次のアプローチを使用して呼び出されます。

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(3 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

これにより、 が生成され0,1,2,3,"Timer Complete"ます。ただし、これを 500ms 間隔で呼び出す方法がわかりません。数値を微調整してみましたが、この関数がどのように機能するかを完全には理解していないことに気付きました。これを調整することは可能ですか、それともここで 1 秒間隔で呼び出されているハードコードされたブラウザー機能がありますか?

すべての値を次のように変更してみました。

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*500)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/500));
    },500); // the smaller this number, the more accurate the timer will be
}

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(5 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

これにより、次が生成されます。

2
3
4
5
Timer complete!

500ミリ秒間隔だと思いますが、よくわかりません。5の値を変更する5 - timeleftと、これが実行される速度にも奇妙なことが起こります。

4

1 に答える 1