Interpretieren von Javascript-Timern I

Hinweis: Dieser Artikel ist ein Auszug aus dem Buch „Secrets of the JavaScript Ninja“ von John Resig . Ich habe ihn nur zum besseren Verständnis übersetzt. Bitte korrigieren Sie mich, wenn die Übersetzung Mängel aufweist.

In diesem Artikel wird der Timer hauptsächlich unter folgenden Gesichtspunkten erläutert:

1. Timer-Übersicht;
2. Eingehende Analyse der Timer-Geschwindigkeit;
3. Verwenden Sie Timer, um große Aufgaben zu erledigen.
4. Verwenden Sie Timer, um Animationen zu verwalten.
5. Bessere Timer-Tests

Von Timern verstehen wir wenig und werden oft missbraucht. Sie sind eine Funktion von JavaScript. Tatsächlich kann es uns bei der Entwicklung komplexer Anwendungen sehr helfen. Timer bieten die Möglichkeit, die Ausführung von Codefragmenten asynchron zu verzögern. JavaScript ist von Natur aus Single-Threaded (nur ein Teil des JS-Codes kann innerhalb eines bestimmten Zeitbereichs ausgeführt werden) und bietet somit die Möglichkeit, diese Einschränkung zu vermeiden eine andere Möglichkeit, den Code auszuführen.

Interessanterweise sind Timer entgegen der landläufigen Meinung nicht Teil der JavaScript-Sprache, sondern Teil der vom Browser eingeführten Methoden und Objekte. Das heißt, wenn Sie es in einer Nicht-Browser-Umgebung ausführen möchten, besteht die Möglichkeit, dass der Timer nicht vorhanden ist und Sie Ihre eigene Version mit bestimmten Funktionen (z. B. Rhino-Threads) implementieren müssen.

1. Wie der Timer funktioniert

Grundsätzlich ist es wichtig zu verstehen, wie Timer funktionieren. Oft ist das Verhalten eines Timers nicht intuitiv, da er sich in einem separaten Thread befindet. Beginnen wir mit einem Test von drei Funktionen, für die wir jeweils die Möglichkeit haben, den Timer zu erstellen und zu steuern.

• var id = setTimeout(fn,delay); startet einen Timer, der nach der Verzögerungszeit eine bestimmte Funktion aufruft. Die Funktion gibt eine eindeutige ID zurück, mit der der Timer zu einem späteren Zeitpunkt abgebrochen werden kann.
• var id = setInterval(fn,delay); ähnelt setTimeout, ruft die Funktion jedoch kontinuierlich auf (zu bestimmten Verzögerungszeiten), bis sie abgebrochen wird;
• clearInterval(id), clearTimeout(id); akzeptiert die ID des Timers (zurückgegeben von einer der oben genannten Funktionen) und beendet den Aufruf des Timers.

Um zu verstehen, wie Timer intern funktionieren, muss ein wichtiges Konzept besprochen werden: Verzögerungen sind nicht garantiert. Da das gesamte JavaScript im Browser in einem einzigen Thread ausgeführt wird, werden asynchrone Ereignisse (z. B. Mausklicks, Timer) nur ausgeführt, wenn während der Ausführung ein offener Zustand vorliegt. Das folgende Beispiel veranschaulicht dieses Problem gut:

In diesem Diagramm gibt es viele Informationen zu verdauen. Wenn Sie es vollständig verstehen, erhalten Sie eine bessere Vorstellung von der asynchronen JS-Ausführung. Das Diagramm ist eindimensional und die Zeit (Wanduhr) wird in Millisekunden in vertikaler Richtung gemessen. Das blaue Kästchen stellt den Anteil der js-Ausführung dar. Beispielsweise dauert die Ausführung des ersten Javascript-Blocks etwa 18 Sekunden, der Mausklick etwa 11 Sekunden und so weiter.