Wie man setTimeout() in JavaScript verwendet, erklärt in 5 Minuten oder weniger

Als Webentwickler sind die Reaktionsfähigkeit und Interaktivität Ihrer Webanwendung Schlüsselkomponenten für das Benutzererlebnis. Um das Benutzererlebnis Ihrer Anwendung zu verbessern, müssen Sie dynamische Verhaltensweisen hinzufügen und die Kontrolle über den Zeitpunkt haben, zu dem bestimmte Codeteile in Ihrer Anwendung ausgeführt werden.

Die Methode setTimeout() ist dafür ein hervorragendes Werkzeug, denn sie ermöglicht es Ihnen, die Ausführung von Code zu planen, Animationen zu orchestrieren, Timer zu erstellen und asynchrone Operationen in Ihrer Anwendung zu verwalten.

Daher ist es wichtig, die Syntax von setTimeout() zu verstehen und zu wissen, wie Sie sie verwenden und in Ihrem nächsten Projekt einsetzen können. Dieser Artikel geht genau darauf ein und vermittelt Ihnen das richtige Wissen, damit Sie die Methode setTimeout() optimal nutzen können.

Die setTimeout-Funktion von JavaScript

setTimeout() ist eine globale Methode, die an das Fensterobjekt gebunden ist und dazu dient, eine Funktion oder ein Stück Code nach einer bestimmten Zeit auszuführen. Wenn Sie beispielsweise eine Funktion haben, die nach vier Sekunden ausgeführt werden soll, ist setTimeout() die Methode, mit der Sie dies erreichen.

Die Methode setTimeout() setzt einen Timer, der bis zum Ablauf der von Ihnen angegebenen Zeit herunterzählt und dann die Funktion oder den Code ausführt, den Sie ihr übergeben haben.

Da es sich um eine globale Methode handelt, befindet sich setTimeout() innerhalb des globalen Objekts und ist daher überall verfügbar, ohne dass ein Import erforderlich ist. Das globale Objekt, das durch das Document Object Model (DOM) im Browser bereitgestellt wird, wird durch die Eigenschaftsnamen Fenster referenziert.

Daher können wir window.setTimeout() oder einfach setTimeout() verwenden, da das globale Objekt window impliziert wird. window.setTimeout() und setTimeout() unterscheiden sich nicht.

Die allgemeine Syntax für setTimeout() lautet wie folgt:

setTimeout(function, delay)

• Funktion - dies ist die Funktion, die nach einer bestimmten Zeit ausgeführt werden soll.
• Verzögerung - Zeit in Millisekunden, nach der die übergebene Funktion ausgeführt werden soll. 1 Sekunde entspricht 1000 Millisekunden.

Wenn Sie setTimeout() verwenden, sollte die von Ihnen angegebene Verzögerung ein numerischer Wert sein, um unerwünschte Ergebnisse zu vermeiden. Das Argument Verzögerung ist optional. Wenn es nicht angegeben wird, wird es standardmäßig auf 0 gesetzt und die übergebene Funktion wird sofort ausgeführt.

setTimeout() gibt eine eindeutige Kennung zurück, die als timeoutID bezeichnet wird. Dabei handelt es sich um eine positive Ganzzahl, die den Timer, der beim Aufruf einer setTimeout()-Methode erstellt wird, eindeutig identifiziert.

Es ist auch wichtig zu wissen, dass setTimeout() asynchron ist. Ihr Timer hält die Ausführung anderer Funktionen im Aufrufstapel nicht an.

Wie Sie setTimeout() verwenden

Lassen Sie uns anhand von Beispielen zeigen, wie Sie die Methode setTimeout() verwenden können:

// setTimeout() mit einer Funktionsdeklaration
setTimeout(function () {
 console.log("Hallo Welt nach 3 Sekunden");
}, 3000)

// setTimeout() mit einer Pfeilfunktion
setTimeout(() => {
 console.log("Hallo Welt in einer Pfeilfunktion - 1 Sekunde")
}, 1000)

Ausgabe:

Hallo Welt in einer Pfeilfunktion - 1 Sekunde
Hallo Welt nach 3 Sekunden

In der obigen Ausgabe protokolliert die zweite setTimeout() ihre Ausgabe zuerst, da sie eine kürzere Verzögerung von 1 Sekunde hat, im Vergleich zur ersten, die eine Verzögerung von 3 Sekunden hat. Wie bereits erwähnt, ist setTimeout() asynchron. Wenn das erste setTimeout() mit einer Verzögerung von 3 Sekunden aufgerufen wird, wird ein 3-Sekunden-Timer gestartet, der jedoch die Ausführung des anderen Codes im Programm nicht anhält.

Während die Methode von 3 herunterzählt, wird der Rest des Codes im Aufrufstapel ausgeführt. In diesem Beispiel ist das nächste Stück Code die zweite setTimeout() mit einer Verzögerung von 1 Sekunde. Da sie eine viel kürzere Verzögerung hat, wird ihr Code vor dem ersten setTimeout() ausgeführt

Wenn Sie setTimeout() verwenden, müssen Sie die Funktion nicht direkt in die setTimeout() Methode schreiben.

// Funktionsdeklaration
function greet() {
 console.log("Hallo!")
}

// eine Funktion in einer Variablen speichern - Funktionsausdruck
const speak = function () {
 console.log("Wie geht es Ihnen?")
}

// eine Pfeilfunktion verwenden
const signOff = () => {
 console.log("Mit freundlichen Grüßen:)")
}

// eine Funktionsreferenz an setTimeout() übergeben
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)

Ausgabe:

Hallo!
Wie geht es Ihnen?
Mit freundlichen Grüßen: Geekflare:)

Wenn wir eine Methode an anderer Stelle definieren und ihr dann setTimeout() übergeben, ist das, was wir der Methode setTimeout() übergeben, eine Referenz auf die Funktion, die wir nach einer bestimmten Zeit ausführen wollen.

setTimeout() mit zusätzlichen Parametern

setTimeout() hat eine alternative Syntax, die es Ihnen ermöglicht, zusätzliche Parameter an die Methode setTimeout() zu übergeben. Diese Parameter werden dann in der Funktion verwendet, die Sie nach der Verzögerung ausführen.

Die Syntax lautet wie folgt:

setTimeout(functionRef, delay, param1, param2, /* ..., */ paramN)

Sie können eine beliebige Anzahl zusätzlicher Parameter übergeben, abhängig von der Anzahl der Argumente, die die Funktion, auf die Sie verweisen, benötigt.

Betrachten Sie die folgende Funktion:

function greet (name, message) {
 console.log(`Hallo ${name}, ${message}`)
}

Wenn Sie die obige Funktion nach einer bestimmten Zeit mit setTimeout() ausführen möchten, können Sie dies wie folgt tun:

// setTimeOut() mit zusätzlichen Parametern
function greet (name, message) {
 console.log(`Hallo ${name}, ${message}`)
}

setTimeout(greet, 2000, "John", "happy coding!");

Ausgabe:

Hallo John, viel Spaß beim Programmieren!

Denken Sie daran: Wenn wir eine Funktion an anderer Stelle definieren und sie dann an setTimeout() übergeben, ist das, was wir übergeben, einfach ein Verweis auf die Funktion. Im obigen Beispiel übergeben wir die Referenz greet und nicht greet(), die die Funktion aufruft. Wir wollen, dass setTimeout() die Funktion mit ihrem Verweis aufruft.

Aus diesem Grund können wir die zusätzlichen Parameter nicht direkt übergeben, wie unten gezeigt:

// Dies führt zu einem ERR_INVALID_ARG_TYPE Fehler
setTimeout(greet("John", "happy coding!"), 2000);

Im obigen Code wird die Funktion greet sofort ausgeführt, ohne den Ablauf von 2 Sekunden abzuwarten. Anschließend wird ein Fehler ausgegeben. Das Ergebnis der Ausführung des Codes sehen Sie unten:

Abbruch von setTimeout()

Wir können die Ausführung einer mit setTimeout() geplanten Funktion verhindern, indem wir die Methode clearTimeout() verwenden . So etwas kann notwendig sein, wenn wir eine Funktion so eingestellt haben, dass sie nach einer bestimmten Zeitspanne ausgeführt wird, wir aber nicht wollen, dass die Funktion ausgeführt wird, nachdem bestimmte Bedingungen erfüllt sind oder sich die Bedingungen ändern.

Die Syntax für die Methode clearTimeout() sieht wie folgt aus:

clearTimeout(timeoutID)

clearTimeout() benötigt ein einziges Argument, timeoutID, das die eindeutige Kennung ist, die von der Methode setTimeout() zurückgegeben wird.

Betrachten Sie das folgende Beispiel:

function text() {
 console.log("Dies wird nicht gedruckt")
}

function greet() {
 console.log("Hallo nach 5 Sekunden")
}

// Planen Sie die Ausführung der Funktion text() nach 3 Sekunden
const timeOutID = setTimeout(text, 3000);

// Löschen Sie die Zeitüberschreitung für text() mit clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)

// Planen Sie die Ausführung der Funktion greet() nach 5 Sekunden
setTimeout(greet, 5000)

Ausgabe:

2 gelöscht
Hallo nach 5 Sekunden

Die Funktion text() wird nicht ausgeführt, da clearTimeout() verwendet wird, um ihre Zeitüberschreitung aufzuheben und somit ihre Ausführung zu verhindern.

Vorteile der Verwendung von setTimeout()

Einige der Vorteile der Verwendung der Methode setTimeout() sind:

• Verzögerung der Code-Ausführung - die Hauptfunktion von setTimeout() besteht darin, Entwicklern die Möglichkeit zu geben, die Ausführung von Code zu verzögern. Dies ist eine wichtige Funktion bei der Erstellung von Animationen, der Verwaltung von zeitgesteuerten Ereignissen und der Steuerung des asynchronen Codeflusses. setTimeout() gibt außerdem den Hauptthread frei, um anderen Code auszuführen.
• Timer-Implementierung - setTimeout() bietet eine einfache Möglichkeit, einfache Timer in einer Anwendung zu implementieren, ohne dass Sie externe Bibliotheken verwenden oder komplexe Datumsoperationen durchführen müssen.
• Drosselung und Entprellung - setTimeout() kann verwendet werden, um die Anzahl der Aufrufe bestimmter Funktionen oder Aktionen zu begrenzen, insbesondere bei Ereignissen wie Scrollen oder Tippen. Beim Debouncing wartet Ihre Anwendung eine bestimmte Zeit lang, bevor sie eine Funktion aufruft. Throttling begrenzt die Anzahl der Funktionsaufrufe innerhalb eines bestimmten Zeitraums. setTimeout() kann für beides verwendet werden
• Verbesserung der Benutzerfreundlichkeit - setTimeout() ermöglicht es Ihnen, die Benutzerfreundlichkeit Ihre Anwendung zu verbessern, indem Sie steuern, wann bestimmte Aktionen stattfinden, z.B. wann Benachrichtigungen, Warnungen, Popup-Nachrichten und Animationen angezeigt werden. Dies ist praktisch, um eine Informationsüberlastung der Benutzer zu verhindern und so das Benutzererlebnis zu verbessern.
• Verbesserung der Web-Performance - setTimeout() kann verwendet werden, um die Performance und die allgemeine Reaktionsfähigkeit von Webanwendungen zu verbessern, indem komplexe Probleme in kleinere, viel einfachere Probleme zerlegt werden. Diese kleineren Probleme können innerhalb eines setTimeout() behandelt werden, so dass andere Teile des Codes weiter ausgeführt werden können, ohne die Leistung oder Reaktionsfähigkeit einer Anwendung zu beeinträchtigen.

Es liegt auf der Hand, dass setTimeout() bei der Entwicklung von Anwendungen mit JavaScript sowohl leistungsstark als auch sehr nützlich ist.

Nachteile der Verwendung von setTimeout()

Einige der Nachteile der Verwendung von setTimeout() sind:

• Ungenaues Timing - setTimeout() kann nicht den genauen Zeitpunkt garantieren, zu dem eine Funktion aufgerufen oder eine Operation ausgeführt wird. Manchmal führen andere, schlecht geschriebene Codes zu Race Conditions, die die Funktion von setTimeout() beeinträchtigen. Wenn Sie mehrere sich überschneidende setTimeout()s verwenden, können Sie sich der Reihenfolge der Ausführung nicht immer sicher sein, insbesondere wenn andere asynchrone Operationen beteiligt sind
• Rückruf-Hölle - Wenn Sie zu viele verschachtelte setTimeout()-Aufrufe haben, kann Ihr Code schwer zu lesen und zu debuggen sein. Es wird auch sehr schwierig sein, den logischen Ablauf Ihrer Anwendung zu verfolgen. Die Verwendung von zu vielen setTimeout() kann auch zu Speicherproblemen in Ihrer Anwendung führen, wenn die setTimeout()-Aufrufe nicht richtig gehandhabt werden.

Während setTimeout() bei seiner Verwendung einige Herausforderungen verhindern kann, können Sie die Nachteile in Ihrer Anwendung minimieren oder ganz vermeiden, wenn Sie sich an bewährte Praktiken und gute Kodierungsverfahren halten.

Fazit

Die Methode setTimeout() kann verwendet werden, um die Ausführung von Funktionen zu verzögern. setTimeout wird häufig für Animationen, das verzögerte Laden von Inhalten und die Behandlung von Timeouts für Anfragen verwendet.

Sie können setTimeout() zum Beispiel verwenden, um Warnmeldungen auf Ihren Webseiten anzuzeigen. Während setTimeout() nicht den exakten Zeitpunkt der Ausführung einer Funktion garantiert, garantiert es deren Ausführung nach einer festgelegten Verzögerung.

Sie können auch JavaScript ORM-Plattformen für eine effiziente Kodierung erkunden.