Details zum JavaScript-Timer

1. Kurze Einführung

In JavaScript gibt es zwei Timer: setInterval() und setTimeout() , und es gibt Methoden zum Abbrechen des Timers.
Dies sind alles window , und window kann beim Aufruf weggelassen werden. Diese beiden Methoden sind nicht in der JavaScript Spezifikation enthalten.

Es gibt vier mit der Timermethode verbundene Methoden:

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

2. Intervall festlegen

2.1 Beschreibung

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, …)

2.2 Parameter

Hinweis: Der Parameter func|code wird normalerweise als Funktion übergeben. Aus historischen Gründen wird die Übergabe einer Codezeichenfolge unterstützt, jedoch nicht empfohlen.

2.3 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.

2.4 Nutzung

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>

3. setTimeout

3.1 Beschreibung

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, …)

3.2 Parameter

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

Hinweis: Der Parameter func|code wird normalerweise als Funktion übergeben. Aus historischen Gründen wird die Übergabe einer Codezeichenfolge unterstützt, jedoch nicht empfohlen.

3.3 Nutzung

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>

4. Den Timer abbrechen

clearInterval() bricht den durch setInterval() gesetzten timer ab.
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);

Hinweis: Beachten Sie, dass setTimeout() 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 Anwendung 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.

5. Verwenden Sie Timer 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.

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

console.timeEnd(Timername)

Der Aufruf von console.timeEnd(name ) stoppt den Timer und druckt die verstrichene Zeit in Millisekunden aus.

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

5.1 Nutzung

Für eine 99999-malige Schleife, wie viel Zeit, Beispiel:

Konsole.Zeit(Name);

lass num;
für (let index = 0; index < 99999; index++) {
  Zahl++;
}

Konsole.timeEnd(Name);

Dies ist das Ende dieses Artikels über die Details des JavaScript-Timers. Weitere relevante Inhalte zum JavaScript-Timer finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!