0

私は HTML5 と Canvas で遊んできたので、自分がやっていることに対して一定のフレームレートがあればありがたいです。そのために、javascript の setInterval を使用しようとしていますが、setInterval が必要以上に速くループしているようです。

テスト目的で、次のような小さなテスト スクリプトを作成しました。

var start = new Date();
var frames = 0;

setInterval(function() { 
    frames++;
    var d = new Date();
    if (d.getTime() - start.getTime() > 1000) {
        console.log(frames);
        frames = 0;
        start = d;
    }
}, 1000/60);

このスクリプトは、1 秒間にカウントされた「フレーム」の数を出力すると思われます。setInterval が正しく機能すると、コンソールに常に「60」と出力されます。ただし、Chrome と Firefox では 1 秒あたり 63 フレームが得られますが、Internet Explorer 9 では 1 秒あたり 66 ～ 67 フレームが得られます (常に最悪の犯罪者です)。

1000 ミリ秒を 20000 ミリ秒に上げると、Chrome で平均 62.5 fps、Firefox で 62.4 fps、Internet Explorer で 66.0 fps になります。

私はMozilla に関する setTimeout に関する非常に啓発的な記事を読んで、「クランプ」について言及し、それが 1 つの考えられる理由であると考えました。ただし、60fps の場合、タイムアウトは 16.6ms になり、使用されるどのクランプよりも高くなります。

また、タイマーエラーである可能性があり、1つまたは2つのフレームがオフになる可能性があると考えましたが、20000ミリ秒でのテストでは同じ平均fpsが返されたため、タイマーでもありません.

私が間違っていることについてのアイデアはありますか？それはとても奇妙な振る舞いです。フィードバックをいただければ幸いです。

4

2 に答える 2

1

setTimeoutの遅延は整数（ミリ秒）です。1000/60は16.67、に切り捨てられ16ます。1000/16です62.5。IEの時​​計は15ms刻みで動作するため、おそらく15ms間隔で関数を実行するため、66.7fpsになります。

あなたの観察された行動に合うすべて。

その上、setTimeoutとsetIntervalの変動が要求された遅延で正確に実行されていないため、システムが突然ビジーになった場合（ネットワーク要求への応答、スクロールアクションなど）、フレームレートが遅くなるか、ぎくしゃくします。追いつくために。

于 2013-03-05T05:29:31.157 に答える
0

残念ながら、この方法では一貫した結果が得られません。問題のスクリプトの実際の実行時間を考慮に入れる必要がありますが、短い場合もあります。

requestAnimationFrame は、この用途に適していると聞きました。

それに関する Mozilla Developer Network からのスニペット。

それについての素敵な記事

于 2013-03-05T05:23:14.593 に答える