JavaScript -SetInterval- und SetTimeout -Methoden erläutert

JavaScript ist eine hochrangige Web-Programmiersprache, in der jede Codeanweisung Zeile für Zeile ausgeführt wird. Nehmen wir jedoch an, Sie möchten einen Code oder eine Funktion später (in Zukunft) ausführen und nicht sofort. Dies wird als Planung als Aufruf in JavaScript bezeichnet und kann mit den beiden integrierten Methoden erreicht werden setTimeout () Und setInterval ().

In diesem Beitrag wird erläutert, was setInterval () Und setTimeout () Integrierte Methoden finden Sie in JavaScript. Bevor wir jedoch weiter gehen.

Was ist die setTimeout () -Methode?

Der setTimeout () Die Methode wird verwendet, um in Zukunft einen bestimmten Code auszuführen und nicht sofort, indem Sie nach einem bestimmten Zeitintervall eine Rückruffunktion aufrufen. Die Rückruffunktion ist definiert als die Funktion, die einer anderen Funktion als Argument zur Verfügung gestellt und später in der äußeren Funktion ausgeführt wird.

Syntax der SetTimeout () -Methode

Der Syntax von setTimeout () wird unten angegeben:

setTimeout (Callbackfunc, Millisekunden);

Das erste Argument, das wir dem geben setTimeout () Methode ist die Rückruffunktion, die nach den bereitgestellten Millisekunden ausgeführt wird.

Beispiel
Lassen Sie uns ein Beispiel durchgehen, in dem wir die festlegen werden setTimeout () Methode auf einer Schaltfläche und wenn der Benutzer auf diese Schaltfläche klickt, werden die Rückruffunktionen nach 2 Sekunden ausgeführt:

Versuch es

In der Rückruffunktion haben wir eine Warnung initialisiert, die nach zwei Sekunden mit der Nachricht angezeigt wird Hallo.

Was ist die setInterval () -Methode?

Der setInterval () Methode ist die gleiche wie setTimeout () Da es auch eine Rückruffunktion nach einer bestimmten Zeit ausführt, jedoch mit der Ausnahme, dass sie die Rückruffunktion kontinuierlich nach diesem bestimmten Zeitintervall ausführt.

Syntax der SetInterval () -Methode

Der Syntax des setInterval () Methode ist wie folgt:

setInterval (myfunc, Millisekunden);

Wie setTimeout () Das erste Argument ist die Rückruffunktion, die nach der angegebenen Anzahl von Millisekunden ausgeführt wird, und die Ausführung wird nach dieser bestimmten Zeit kontinuierlich wiederholt.

Beispiel
Lassen Sie uns ein Beispiel durchgehen, in dem wir die aktuelle Systemzeit nach jeder 1 Sekunde zeigen werden.

const myfunc = () =>
const d = neues Datum ();
Konsole.log (d.tolocaletimestring ());

setInterval (myfunc, 1000);

Im obigen Code haben wir zuerst eine Funktion erstellt, in der wir ein neues Datum mit dem erstellt haben Datum Objekt und Konsole haben die Systemzeit angemeldet.

Nachdem wir die Funktion definiert hatten, haben wir die verwendet setInterval () Methode, den Funktionsnamen und 1000 Millisekunden übergeben, was 1 Sekunde ist. Jetzt läuft die Funktion nach jeder 1 Sekunde nach und wir werden nach jeder Sekunde unsere Systemzeit auf dem Konsolenprotokoll sehen:

Ausführungsunterbrechung von setTimeout () und setInterval ()

Wenn Sie die Rückruffunktion von nicht wollen setInterval () oder setTimeout () Um noch auszuführen, können wir die in JavaScript verfügbaren Stoppmethoden für beide verwenden.

Clearimeout () Methode
Die Ausführung der Ausführung des setTimeout () Funktion können wir die verwenden Clearimeout () Methode, die eine Variable/ID einnimmt, die von der zurückgegeben wird setTimeout () Methode als Argumentation.

Beispiel
In diesem Beispiel werden wir die Ausführung der mit der Methode setTimeout () definierten Aufruffunktion einstellen:

Versuch es
Stoppen

Der angegebene Code ist eine erweiterte Form des zuvor gezeigten SetTimeout (). In diesem Code haben wir eine weitere Schaltfläche mit dem Namen von hinzugefügt Stoppen und ruft die Funktion stop () auf, wenn ein Benutzer auf die Schaltfläche Stopp klickt. Die Stop () -Funktion hat clearimeout (), die eine Variable als Argument aufweist. Die Variable T ist einfach eine ID, die aus der Funktion setTimeout () zurückgegeben wurde.

Wenn ein Benutzer auf die klickt Versuchen IT -Taste dann nach drei Sekunden sehen wir dann Hallo in der Warnung wie zuvor gesehen. Wenn der Benutzer jedoch jetzt vor 3 Sekunden auf die Schaltfläche Stopp klickt, wird die Myfunktion der Rückruffunktion nicht aufgerufen, und daher werden wir keine Warnung sehen. Dieses Phänomen ist unten gezeigt:

clearInterval () Methode
In ähnlicher Weise, um die Ausführung der Ausführung zu stoppen setInterval () Funktion können wir die verwenden ClearInterval () Methode, die auch die von der zurückgegebene Variable annimmt setInterval () als Argument.

Beispiel

Gehen wir ein Beispiel durch setInterval () Methode.

Halt die Zeit

Im obigen Code haben wir eine Schaltfläche in der HTML definiert und dann das Onclick -Ereignis auf dieser Schaltfläche initialisiert. Wenn der Benutzer auf die definierte Schaltfläche klickt, ist die setInterval () Die Methode hört auf, auszuführen.

Wenn wir auf die Schaltfläche „Stoppzeit“ klickten, stellte die Systemzeit auf, auf unserem Konsolenprotokoll anzuzeigen:

Abschluss

Der setTimeout () Und setInterval () Methoden beide planen einen Anruf, der eine Funktion später nach einer bestimmten Anzahl von Millisekunden ausführen soll, mit der Ausnahme, dass setInterval () führt nach dieser bestimmten Zeit eine Funktion kontinuierlich aus, anders als zu setTimeout () Methode, die eine Funktion nur einmal nach der angegebenen Zeit ausführt.

In diesem Beitrag haben wir besprochen, was die setTimeout () Und setInterval () Methode ist und wir haben ihre Beispiele zusammen mit Screenshots der Ausgabe gesehen. Am Ende haben wir auch gesehen, wie wir die Ausführung der Rückruffunktionen stoppen können setTimeout () Und setInterval () Methoden.