JavaScript の `setTimeout()` と `setInterval()` はなぜ不正確ですか? より正確なタイマーを作成するにはどうすればよいですか?

正確な JavaScript タイマー: 分析

多くの開発者は、一般に setTimeout() メソッドまたは setInterval() メソッドを使用してタイマーを作成します。ただし、これらの方法には精度の保証がありません。意図したペースから逸脱して、任意の遅れが発生する可能性があります。

不正確性の原因

固有の問題は、setTimeout() および setInterval() で使用されるメカニズムに起因します。これらの関数はブラウザのイベント ループに依存しており、一定の間隔で実行されることが保証されていません。実際の実行時間は、ブラウザの負荷、システム リソース、その他の要因によって異なる場合があります。

正確なタイマーの作成

この問題に対処するには、開発者は代わりに正確な (ミリ秒精度の) タイムスタンプを取得するための日付オブジェクト。その後、実行回数に依存するのではなく、現在の時刻値に基づいてロジックを作成する必要があります。

単純なタイマーまたはクロックの場合、時間差を明示的に維持することが実行可能なアプローチです。

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    // ...
    // Output in seconds
    console.log(Math.floor(delta / 1000));
}, 1000);

ただし、この手法では、間隔の実行に潜在的な遅れが生じるため、値が不安定になる可能性があります。これを軽減するために、開発者は間隔をより頻繁に更新することを検討できます (100 ミリ秒ごとなど)。

高度なテクニック: タイマーの自動調整

ドリフトのない安定した間隔の場合、自己-タイマーの調整は高度なソリューションを提供します。これらのタイマーは、実際の経過時間に基づいて後続の実行間の遅延を動的に調整します:

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    if (dt > interval) {
        // Handling severe drift here
    }
    // ... Perform desired action

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // Adjust delay to correct for drift
}

以上がJavaScript の `setTimeout()` と `setInterval()` はなぜ不正確ですか? より正確なタイマーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。