Detaillierte Erklärung der JavaScript-Timer

Kurze Einleitung

In JavaScript gibt es zwei Timer: setInterval() und setTimeout(), von denen jeder über eine Methode zum Abbrechen des Timers verfügt.

Dies sind alles Fensterobjekte, und das Fenster kann beim Aufruf weggelassen werden. Diese beiden Methoden sind nicht in der JavaScript-Spezifikation enthalten.

Es gibt vier mit der Timermethode verbundene Methoden.

Der Unterschied zwischen setTimeout() und setInterval() besteht darin, dass sie zu unterschiedlichen Zeiten ausgeführt werden.

Hinweis: setTimeout() wird nur einmal ausgeführt, während setInterval() regelmäßig in einem bestimmten Intervall ausgeführt wird.

Intervall festlegen

beschreiben

Mit setInterval() können Sie eine Funktion wiederholt aufrufen oder einen Codeabschnitt in einem festgelegten Zeitabstand ausführen. Die Periodeneinheit beträgt Millisekunden.

Wenn setInterval() nicht von clearInterval() geschlossen wird oder die Seite geschlossen wird, wird sie weiterhin aufgerufen.

Es gibt mehrere Parameter für setInterval.

Erstens: Wenn der erste Parameter ein Codesegment ist, ist die Methode setInterval() optional.

Zweitens, wenn der erste Parameter eine Funktion ist, kann die Methode setInterval() mehrere Parameter haben.

let timerId = setInterval(Funktion|Code, Verzögerung, arg1, arg2, …)

Parameter

Mit dem Parameter func|code werden üblicherweise Funktionen übergeben. Aus historischen Gründen wird die Übergabe einer Codezeichenfolge unterstützt, jedoch nicht empfohlen.

Rückgabewert

Der Rückgabewert timeoutID ist eine positive Ganzzahl, die die Nummer des Timers angibt. Dieser Wert kann an clearTimeout() übergeben werden, um den Timer abzubrechen.

Verwendung

Dies ist ein Beispiel für das Klicken auf eine Schaltfläche und das Erhöhen einer Zahl jede Sekunde.

<p id="showNum"></p>
<button onclick="timer()">Klicken Sie hier, um die Zahl jede Sekunde um eins zu erhöhen</button>
 <Skript>
  const showNum = document.getElementById("showNum");
   let timerId; // Timer-ID
  sei num = 0;
   Funktion Timer() {
    TimerId = setzeInterval(addNum, 1000);
  }
   Funktion addNum() {
    showNum.innerText = `${num++}`;
  }
   // Es wurde kein Code zum Stoppen des Timers geschrieben</script>

setTimeout

beschreiben

setTimeout() gibt eine Ganzzahl zurück, die die Timernummer darstellt, die verwendet werden kann, um den Timer später abzubrechen.

setTimeout() können wir die Ausführung einer Funktion verschieben, bis ein bestimmtes Intervall verstrichen ist.

let timerId = setTimeout(Funktion|Code, Verzögerung, arg1, arg2, …)

Parameter

Die Parameter von setTimeout() sind die gleichen wie die von setInterval() .

Mit dem Parameter func|code werden üblicherweise Funktionen übergeben. Aus historischen Gründen wird die Übergabe einer Codezeichenfolge unterstützt, jedoch nicht empfohlen.

Verwendung:

Die Verwendung von setTimeout() ist dieselbe wie bei setInterval() .
Im Gegensatz zu setTimeout() , das nur einmal ausgeführt wird, wird setInterval() jedoch periodisch entsprechend der angegebenen Zeit ausgeführt.

<p id="showNum"></p>
<button onclick="timer()">Nach dem Klicken eine Sekunde warten und die Zahl erhöht sich um eins</button>
 <Skript>
  const showNum = document.getElementById("showNum");
   lass TimerId;
  sei num = 0;
  addNum();
   Funktion Timer() {
    TimerId = setzeTimeout(addNum, 1000);
  }
   Funktion addNum() {
    showNum.innerText = `${num++}`;
  }
 </Skript>

Timer abbrechen

Die Methode clearInterval() bricht den durch setInterval() gesetzten Timer ab.

Die Methode clearTimeout() bricht den durch setTimeout() gesetzten Timer ab.

Die Verwendung ist sehr einfach und erfordert nur einen Parameter: TimeoutID, die Kennung des Timers, den Sie abbrechen möchten.
Diese ID wird vom entsprechenden Aufruf von setTimeout() bzw. clearTimeout() zurückgegeben.

clearInterval(Intervall-ID);
Zeitüberschreitung löschen (Zeitüberschreitungs-ID);

Beachten Sie, dass meout() und setInterval() denselben Nummernpool verwenden. Technisch gesehen sind clearTimeout() und clearInterval() austauschbar. Um Verwirrung zu vermeiden, sollten Sie die Abbruch-Timing-Funktionen jedoch nicht verwechseln.

Die Verwendung ist einfach

Funktion Timer() {
  TimerId = setzeTimeout(addNum, 1000);
}
 clearTimeout(timerId); // Wenn der Code bis zu dieser Zeile ausgeführt wird, wird der durch Timer gesetzte Timer abgebrochen.

Verwenden des Timers in der Konsole

Sie können Timer auch in der Browserkonsole verwenden

console.time(Timername)

Erstellen Sie einen Timer mit dem Namen „Name“ und starten Sie ihn.

Jeder Timer muss einen eindeutigen Namen haben und auf einer Seite können maximal 10.000 Timer gleichzeitig ausgeführt werden.

console.timeEnd(Timername)

Rufen Sie console.timeEnd(name) auf, um den Timer zu stoppen und die verstrichene Zeit in Millisekunden auszudrucken.

Konsole.Zeit(TimerName);
console.timeEnd(Timername);

Verwendung

Beispiel dafür, wie lange es dauert, bis eine For-Schleife 99999 Mal wiederholt wird.

Konsole.Zeit(Name);
 lass num;
für (let index = 0; index < 99999; index++) {
  Zahl++;
}
 Konsole.timeEnd(Name);

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!