JavaScript で高精度のタイマーを作成するにはどうすればよいですか?

JavaScript での正確なタイマーの作成

setInterval や setTimeout などの JavaScript のタイマーは便利ですが、正確さに欠けます。遅延やドリフトが発生しやすく、長期間にわたってタイミング エラーが発生する可能性があります。これに対処するには、正確な精度でタイマーを作成する別のアプローチを検討することが不可欠です。

JavaScript タイマーの不正確さ

setInterval などのタイマーの不一致は、その基礎となるタイマーに起因します。実装。これらの関数は、ブラウザーのコールバックを使用して目的の遅延を近似しますが、さまざまなシステム要因により実行に不規則性が発生する傾向があります。その結果、正確なタイミングを保証できず、時間の経過とともに重大なエラーが蓄積される可能性があります。

正確なタイマーの作成

この制限を克服するには、より信頼性の高いアプローチとして、以下を使用します。 Date オブジェクトを使用して、ミリ秒の精度で現在時刻を取得します。この正確な時間測定を活用することで、経過時間を正確に反映するタイマーを実装できます。

var start = Date.now(); // Get the current time as a millisecond timestamp.
setInterval(function() {
    var delta = Date.now() - start; // Calculate the time difference since the start.
    ... // Perform your timed operations using 'delta', which represents milliseconds elapsed.
}, 1000); // Set the interval to update every second (1000 milliseconds).

このアプローチでは、経過時間を正確に測定できます。さらに、クロックをより頻繁に (100 ミリ秒ごとなど) 更新することでタイマーの精度を調整し、潜在的なタイミング ジャンプを最小限に抑えることができます。

一定の時間間隔と最小限のドリフトを必要とするアプリケーションの場合、より高度なタイマー戦略は次のとおりです。推奨:

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);

function step() {
    var dt = Date.now() - expected; // Determine the drift between actual and expected execution times.
    if (dt > interval) {
        // Handle significant delays (e.g., tab inactivity or other issues).
    }

    ... // Perform your timed operations.

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // Adjust the next timeout interval based on observed drift.
}

この自動調整タイマーはドリフトを補正し、次のタイムアウト遅延を再計算することで一貫した正確な間隔を確保します。前回の実行中に実際に経過した時間に基づきます。

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