Javascript/jQuery を使用してストップウォッチ アプリケーションを開発しています。問題は、ミリ秒の値がミリ秒と同期していないことですREAL
。setInterval()
の間隔で関数を使用していますが1 millisecond
、それでもこの問題が発生しています。
jsFiddle: http://jsfiddle.net/FLv3s/
助けてください!
Javascript/jQuery を使用してストップウォッチ アプリケーションを開発しています。問題は、ミリ秒の値がミリ秒と同期していないことですREAL
。setInterval()
の間隔で関数を使用していますが1 millisecond
、それでもこの問題が発生しています。
jsFiddle: http://jsfiddle.net/FLv3s/
助けてください!
更新をトリガーするために使用しますが、実際の時間の計算にはsetInterval
( 経由で) システム時間を使用します。new Date()
正直なところ、私はあなたとほぼ同じことを試みました (Javascript のみで正確なメトロノームを作成する) - 長い話を短くするために: ミリ秒 (またはそれ以下) に関して完全に正確であることは、残念ながら (まだ) 不可能ですJavaScriptのみで。
詳細については、次の質問をお勧めします: JavaScript は高解像度タイマーを提供しますか?
または、より正確には、このブログ記事: http://ejohn.org/blog/how-javascript-timers-work/
よろしく、 ドミニク
JavaScript だけでなく、どの言語でもプログラムの実行はリアルタイムではありません。コードを実際に実行してカウンターをインクリメントし、ビューを更新するには少し時間がかかり、「タイミング」がずれます。
さらに、多くのブラウザーには「最小タイムアウト」の長さがあり、これは 4 から約 16 の間で変化し (後者はコンピューター独自のクロック タイマーです)、実際にコードを混乱させます。
代わりに、デルタ タイミングを使用する必要があります。
var startTime = new Date().getTime();
setInterval(function() {
var elapsed = new Date().getTime()-startTime;
// update view according to elapsed time
},25);
途切れ途切れに見えることが心配な場合は、requestAnimationFrame
代わりに使用して、フレームごとに正確に 1 回タイマーを更新することを検討してください。これには、ユーザーがタブを切り替えたときに更新されないという追加の利点があります (ただし、タブがアクティブでない場合、再描画する必要はありません。
新しいperformance
オブジェクトを使用して、より正確な時間を取得できます。requestAnimationFrame
これをsetInterval の代わりに組み合わせる:
var startTime = performance.now(),
currentTime,
isRunning = true;
loop();
function loop(timeElapsed) {
currentTime = performance.now();
if (isRunning) requestAnimationFrame(loop);
}
startTime
から差し引くだけcurrentTime
です。
timeElapsed
rAF によって渡された経過時間を含むものを残しました。これは、何かに使用することもできます (または単に無視することもできます)。
ただし、すべてのブラウザーがこれをサポートしているわけではありません (プレフィックスを使用するブラウザーもあります)。そのため、モバイルでは標準のシステム時刻オブジェクトを使用する必要があります。