ドリフトを回避する正確な JavaScript タイマーを作成するにはどうすればよいですか?

正確な JavaScript タイマーの作成

タイマーは、JavaScript でタスクのスケジュールを設定し、リアルタイム機能を実装するために重要な役割を果たします。ただし、JavaScript 実行の非同期の性質により、タイマーの精度を確保することは困難な場合があります。

setInterval/setTimeout の不正確さ

提供されたコード スニペットは、setInterval 関数を利用して、次の間隔でカウンターをインクリメントします。 2番。ただし、3600 秒経過してもカウンターが約 3500 秒にしか達していないことがわかりました。これは、setInterval と setTimeout が本質的に正確ではないためです。

Date オブジェクトを使用した正確なタイミング

正確なタイマーを作成するには、代わりに Date オブジェクトを使用することをお勧めします。 Date オブジェクトを使用すると、ミリ秒の精度で現在時刻を取得できます。以下のように、現在時刻と開始時刻の差に基づいてタイマーのロジックを構築できます。

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    ...
    output(Math.floor(delta / 1000)); // in seconds
}, 1000); // update about every second

自動調整タイマー

ドリフトせずに一定の間隔を必要とするタイマー アプリケーションの場合、自動調整タイマーの方が良い選択肢です。実際の経過時間に基づいてタイムアウト間の遅延を動的に調整します。このアプローチにより、タイマーは確実に予定通りに動作します:

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // the drift (positive for overshooting)
    ... // do what is to be done
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // take into account drift
}

以上がドリフトを回避する正確な JavaScript タイマーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。