Wie kann ich genaue Timer in JavaScript erstellen?

Genaue Timer in JavaScript erstellen

Das Bestimmen genauer Zeitintervalle in JavaScript kann aufgrund der Ungenauigkeit von setTimeout() und setInterval( ).

Ungenauigkeit von setTimeout() und setInterval()

setTimeout() und setInterval() basieren auf den Planungsmechanismen des Browsers, die durch Systemressourcen und Browseraktivität beeinflusst werden können. Diese inhärente Variabilität kann zu Inkonsistenzen und unzuverlässigem Timing führen, wie im gegebenen Beispiel gezeigt.

Lösung: Verwenden des Datumsobjekts

Um genaue Timer zu erstellen, sollten Sie die Verwendung des Datums in Betracht ziehen Verwenden Sie die now()-Methode des Objekts, um den aktuellen Millisekunden-Zeitstempel abzurufen. Dieser Ansatz bietet eine bessere Präzision im Vergleich zu Callback-basierten Methoden.

Einfache Timer-Implementierung:

Für grundlegende Timing-Szenarien können Sie den Zeitunterschied explizit mit dem folgenden Ansatz verfolgen :

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

Diese Methode verfolgt den Zeitunterschied seit dem Start des Timers. Um mögliche Wertsprünge zu vermeiden, wird empfohlen, das Intervall häufiger zu aktualisieren (z. B. alle 100 ms).

Selbstjustierende Timer

Für präzise, ​​nicht driftende Intervalle Sie können selbsteinstellende Timer implementieren. Diese Timer passen die Verzögerung für jedes wiederholte Timeout basierend auf der tatsächlich verstrichenen Zeit an:

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    ...
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // adjust delay for drift
}

Dieser Ansatz überwacht die Zeitabweichung und kompensiert etwaige Inkonsistenzen, wodurch eine genauere Timing-Kadenz gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich genaue Timer in JavaScript erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!