Warum sind „setTimeout()' und „setInterval()' von JavaScript ungenau und wie kann ich einen präziseren Timer erstellen?

Genauer JavaScript-Timer: Eine Analyse

Viele Entwickler verwenden üblicherweise die Methoden setTimeout() oder setInterval(), um Timer zu erstellen. Allerdings mangelt es diesen Methoden an Genauigkeitsgarantien. Es kann zu willkürlichen Verzögerungen kommen, die von der beabsichtigten Geschwindigkeit abweichen.

Ungenauigkeitsursachen

Das inhärente Problem ergibt sich aus dem von setTimeout() und setInterval() verwendeten Mechanismus. Diese Funktionen basieren auf der Ereignisschleife des Browsers, deren Ausführung in konsistenten Intervallen nicht garantiert werden kann. Die tatsächliche Ausführungszeit kann je nach Browserauslastung, Systemressourcen und anderen Faktoren variieren.

Genaue Timer erstellen

Um dieses Problem zu beheben, sollten Entwickler stattdessen die nutzen Datumsobjekt, um genaue (millisekundengenaue) Zeitstempel zu erhalten. Anschließend sollten sie ihre Logik auf dem aktuellen Zeitwert basieren, anstatt sich auf die Ausführungsanzahl zu verlassen.

Für einfache Timer oder Uhren ist die explizite Beibehaltung des Zeitunterschieds ein praktikabler Ansatz:

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);

Allerdings kann diese Technik aufgrund möglicher Verzögerungen bei der Intervallausführung zu sprunghaften Werten führen. Um dies abzumildern, können Entwickler erwägen, das Intervall häufiger zu aktualisieren, beispielsweise alle 100 ms.

Erweiterte Techniken: Selbstanpassende Timer

Für stabile Intervalle ohne Drift, selbst -Einstellbare Timer bieten eine fortschrittliche Lösung. Diese Timer passen die Verzögerung zwischen nachfolgenden Ausführungen dynamisch 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
    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
}

Das obige ist der detaillierte Inhalt vonWarum sind „setTimeout()' und „setInterval()' von JavaScript ungenau und wie kann ich einen präziseren Timer erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!