Ich weiß, dass Timer schon seit einiger Zeit eine Funktion sind, die viele Leute bei ihren täglichen Aufgaben nutzen. In der JavaScript-Welt werden Timer häufig mit den Funktionen setTimeout oder setInterval implementiert. Die schlechte Nachricht für Sie, wenn Sie dies tun, ist, dass es keine gute Vorgehensweise ist, und ich werde versuchen, den Grund dafür zu erklären.

Bevor ich anfange, meinen Gedanken zu erklären, habe ich eine Frage an Sie: Kann man eine Uhr verwenden, die die falsche Zeit anzeigt?

Wenn Sie mit „Ja“ geantwortet haben, tut es mir leid, dass ich Ihre kostbare Zeit verschwendet habe, da dieser Artikel nicht Ihnen gehört.

Wenn Ihre Antwort dagegen negativ ist, erkläre ich, warum die Verwendung von setTimeout oder setInterval so ist, als würde man eine beschädigte Uhr verwenden, um die Zeit zu ermitteln.

Das Problem mit diesen Funktionen

Betrachten wir zunächst den folgenden Ausschnitt

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


Wenn Sie dieses Snippet in Ihrer Browserkonsole ausführen, erhalten Sie das folgende Ergebnis 



Dieses Verhalten ist auf die Tatsache zurückzuführen, dass setTimeout den Rückruf in die Warteschlange des Browsers einfügt, sodass er ihn verarbeiten soll, sobald er inaktiv ist. (hat keine Aufgabe zu erledigen), mit anderen Worten, der Rückruf an setTimeout übergeben, hat niedrige Priorität

Wenn ich das weiß, kann ich mir vorstellen, dass es für Sie schwierig sein wird, Timer mit der setTimeout-Funktion zu implementieren, da Sie 2 oder sogar 10 Ticks (je nachdem, wie beschäftigt Ihr Browser ist) gleichzeitig haben können. Das Debuggen wird ein Albtraum sein, aber haben wir eine bessere Lösung?

  
  
  Eine Möglichkeit, diese Funktionen zu vermeiden


Um eine bessere Möglichkeit zur Implementierung von Timern bereitzustellen, sollten wir die Funktion „requestAnimationFrame“ verwenden, da sie den Browser anweist, vor dem nächsten Paint einen Rückruf auszuführen (mit anderen Worten, bevor eine Änderung in der Benutzeroberfläche auftritt)

Der Unterschied ist hier ziemlich subtil, daher ist es besser, ihn anhand des Codes zu verstehen. Nehmen wir unser vorheriges Snippet zurück und optimieren es ein wenig, um setTimeout und requestAnimationFrame zu vergleichen

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


In diesem Beispiel können wir sehen, dass bei der Ausführung auf Chrome setTimeout vor requestAnimationFrame  ausgeführt wird (obwohl in einigen seltenen Fällen das Gegenteil passiert)



Aber wenn Sie es unter Firefox ausführen, wird dies die Ausgabe sein



Das kann verwirrend erscheinen, aber wenn Sie ein wenig aufmerksam sind, werden Sie feststellen, dass während der Ausführung kein Malen stattfindet. Wie dieses Szenario gehandhabt wird, hängt also vom Browser ab.

Wenn wir nun unser Snippet so anpassen können, dass der Browser die Seite neu zeichnet, schauen wir mal, was passieren wird

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Hier ist die Ausgabe auf Chrome



Und hier ist die Ausgabe in Firefox



Wie Sie in den Protokollen sehen können, hat die requestAnimationFrame-Funktion immer Vorrang vor anderen geplanten Rückrufen, wenn der Browser Änderungen an der Benutzeroberfläche vornimmt.

Da wir im Web ständig Repaints durchführen, ist requestAnimationFrame eine offensichtliche Wahl, um Timer zu implementieren.

  
  
  Die Funktion „requestAnimationFrame“ verstehen


Die Funktion akzeptiert nur einen Callback als Parameter. Um den Rückruf mit Kontext zu versehen, sollte er einen Zeitstempel benötigen, der die Zeit angibt, zu der der vorherige Frame geendet hat, basierend auf dem Zeitpunkt der ersten Darstellung der Seite.

Die Funktion gibt eine Ganzzahl zurück, die die Kennung der Anfrage darstellt. Dies kann nützlich sein, wenn Sie die Anfrage mit der Funktion cancelAnimationFrame abbrechen möchten.

  
  
  Eine einfache Implementierung einer Stoppuhr in JavaScript


Um eine Stoppuhr zu implementieren, gibt es einige Anforderungen:

• Wir sollten wissen, nach welcher Zeit es ticken soll (im Allgemeinen eine Sekunde)
• Wir sollten die Zeitverzögerung kennen, nach der die Stoppuhr aufhören sollte zu ticken
• Die Tickintervalle sollten kürzer sein als die Verzögerung

Unter Berücksichtigung all dieser Anforderungen erstellt der folgende Codeausschnitt eine Stoppuhr für Sie

Outro

Ich weiß, es war vielleicht eine lange Lektüre, aber ich glaube, dass es Ihnen gefallen hat. Wenn Sie jedoch Fragen oder Vorschläge haben, können Sie sich jederzeit an mich wenden.

Vielen Dank fürs Lesen und auf Wiedersehen?