0

Javascriptで非常に高速なタイマーが必要です。タイマーの分解能は10ミリ秒と見なされます。私はすでに動作タイマーを実装しましたが、問題は、時間が常にブラウザーで実行されている他のリソースの数に依存することです。また、アニメーションGIFが実行されていると、タイマーがまったく機能しなくなります。これはコードです（動作しています！）：

var timer = new Timer();

function Timer(){
    var time = 0;
    //Every 10ms we are incrementing the timer:
    setInterval(function(){
        time=time+1;
    },10);
    this.getTime=function(){return time;}
}

function testTimer(){
    var counter = 0;
    var resultsum = 0;
    var everytensum = 0;
    setInterval(function(){
        counter = counter + 1;
        window.timeoutTesterRunning = true;
        var timeoutTester = new TimeoutTester();
        setTimeout(function(){
            console.log(counter+": "+timeoutTester.getResult());
            resultsum = resultsum+timeoutTester.getResult();
            console.log(resultsum);
            if(counter%10==0){
                console.log("Counting last 10 seconds: "+(resultsum-everytensum));
                console.log("Counting last "+counter+" seconds: "+resultsum);
                everytensum = resultsum;
            }
        },1200)
    }, 3000);
}

function TimeoutTester(){
    var result;
    var snap_time1 = timer.getTime();
    setTimeout(function(){
        var snap_time2 = timer.getTime();
        result = snap_time2-snap_time1;
    },1000);
    this.getResult=function(){return result;}
}

これで、console.logからの結果（合計は角かっこで囲まれています）：

[10:10:54.466] 1: 100 (100)
[10:10:57.466] 2: 100 (200)
[10:11:00.466] 3: 100 (300)
[10:11:03.466] 4: 100 (400)
[10:11:06.466] 5: 100 (500)
[10:11:09.465] 6: 100 (600)
[10:11:12.466] 7: 101 (701)
[10:11:15.467] 8: 100 (801)
[10:11:18.467] 9: 100 (901)
[10:11:21.467] 10: 100 (1001)
[10:11:21.476] Counting last 10 seconds: 1001
[10:11:24.467] 11: 100 (1101)
[10:11:27.468] 12: 100 (1201)
[10:11:30.467] 13: 100 (1301)
[10:11:33.478] 14: 60 (1361)  //Animated Gif started: Less countings! ("Time runs longer")
[10:11:36.476] 15: 57 (1418)
[10:11:39.482] 16: 58 (1476)
[10:11:42.472] 17: 61 (1537)
[10:11:45.474] 18: 56 (1593)
[10:11:48.484] 19: 48 (1641)
[10:11:51.470] 20: 55 (1696)
[10:11:51.476] Counting last 10 seconds: 695
[10:11:51.482] Counting last 20 seconds: 1696

カウンターはかなり定期的に動作します。しかし、ブラウザが（アニメーションGIFによって）ビジー状態の場合、Javascriptには間隔を正しく設定する時間がありません。関数Timer()はインクリメントするのに必要な時間を受け取らないvar timeので、値ははるかに低くなります（最初にテストを開始したとき、値は約40でさらに低くなりましたが、関数を使用して値を約55に上げることができました実装）。

そのJavascriptタイマーを機能させる方法を知っている人はいますか？それとも、ブラウザがタイマーを強制終了するのを防ぐことは不可能ですか？

4

3 に答える 3

3

setIntervalタイミングをとることはありませんでしたが、実行をスケジュールするために作られました！間隔は信頼できません。タイミングを調整する場合は、Dateタイムスタンプを使用します。

function Timer(){
    var start = Date.now();
    this.getTime=function() {
        return Date.now() - start;
    }
}

そうすれば、1ミリ秒の解像度が得られます。

于 2013-02-20T14:35:06.297 に答える
0

var timer = function（f、args）{t = Date.now（）; f.call（args）; console.log（Date.now（）-t）}

于 2013-02-20T14:37:04.597 に答える
0

タイマーの実装が不可能だったので、私は穴の異なる解決策に行き着きました。それは一種のブルートフォースです-setInterval内でアニメーションを実行します：

function animate(elementId,pictureTimeArrayName){
    var elementStyle = document.getElementById(elementId).style;
    var pictureTimeArray = window[pictureTimeArrayName];

    function toInterval(startDate, timeSinceStart, picture){
        var interval = setInterval(function(){
            if(Date.now()-startDate>=timeSinceStart){
                clearInterval(interval);
                elementStyle.background = "url("+picture+")";
            }
        },2);
    }

    setInterval(function(){
        var startDate = Date.now();
        for(var i=0;i<pictureTimeArray.length;i++){
            toInterval(startDate,pictureTimeArray[i].time,pictureTimeArray[i].picture);
        }
    },pictureTimeArray[pictureTimeArray.length-1].time);
}

配列は次のようになりますが、次のようになります。

var array_1 = [{picture: "animations/pic_1.gif", time: "30"},
               {picture: "animations/pic_2.gif", time: "60"},
               ...
               {picture: "animations/pic_36.gif", time: "1080"},];

これは非常に良さそうです（> = 30 fpsの場合）。ただし、アニメーションGIFが実行されている場合、それはまだそれほどスムーズではありません。そして、それが繰り返されるアニメーションである場合、図面は常にきれいであるとは限りません。一部のブラウザバージョン（Firefoxから）では、描画は古いバージョンよりもさらに悪く、他のブラウザ（Chrome）にも問題があります。特に、Chromeでブラウザウィンドウを変更してウィンドウに戻った場合：アニメーションは非常に奇妙に見えます。

したがって、プロのアニメーションには、FlashまたはJavascript以外の別のソリューションを使用する方がよいでしょう。

于 2013-02-24T22:45:33.120 に答える