Javascript Settimeout

| | | | | |

setTimeout() und setInterval() sind JavaScript-Timing-Ereignisse. Die JavaScript-Methode setTimeout() fuhrt eine Funktion nach einem Zeitraum von Millisekunden aus. JavaScript setInterval() fuhrt eine Funktion nach einer bestimmten Zeitspanne von Millisekunden kontinuierlich aus.

JavaScript läuft zeilenweise. Sobald eine Zeile ausgefuhrt wurde, beginnt die nächste Zeile. Fur die meisten Websites ist diese Struktur sinnvoll: Sie mussen Ihren Code in einer Reihenfolge ausfuhren. Was ist, wenn Sie eine Unterbrechung zwischen den Vorgängen einfuhren möchten?

Hier sind die Methoden setTimeout und setInterval praktisch. setTimeout ruft eine Funktion nach einer bestimmten Verzögerung auf. setInterval ruft eine Funktion kontinuierlich mit einer bestimmten Verzögerung auf.

In diesem Leitfaden werden wir daruber sprechen, was setTimeout und setInterval< /em> sind. Wir zeigen anhand einiger Beispiele, wie sie funktionieren, damit Sie mit diesen Methoden beginnen können. Lass uns beginnen!

Was ist JavaScript setTimeout?

JavaScript setTimeout() ruft eine Methode nach einer bestimmten Zeitspanne von Millisekunden auf. Die Methode wird nur einmal aufgerufen. Mit der Methode setTimeout() können Sie Verzögerungen in Ihren Code einfugen.

Sehen Sie sich die Syntax dieser Methode an:

Die beiden von setTimeout akzeptierten Parameter sind:

  • Funktion: Die Funktion, die Sie nach Ablauf einer bestimmten Zeit ausfuhren m√∂chten.
  • Zeit: Die Zeit, die Ihr Programm warten soll, bevor eine Funktion ausgefuhrt wird .

Starten Sie einen setTimeout-JavaScript-Timer

Erstellen Sie einen Timer, der "Karrierekarma!‚" zur Konsole mit einer Pfeilfunktion:

Dieser Timer hat zwei Argumente. Das erste Argument ist die JavaScript-Funktion, die wir in unserem Fensterobjekt ausfuhren möchten. Das zweite Argument ist die Zeitspanne in Millisekunden, die verstreichen soll, bevor der Code in unserer Funktion ausgefuhrt werden soll.

Nachdem wir zwei Sekunden gewartet haben, gibt unser Code "Karrierekarma!‚" in die JavaScript-Konsole.

Die Funktion, die Sie aufrufen möchten, muss nicht innerhalb des setTimeout definiert werden Funktion. Wir können unseren Code umgestalten, um ihn leichter lesbar zu machen:

Die Funktion, die zuvor ein Argument war, befindet sich jetzt in einer eigenen Funktion namens printCareerKarma. Wir verweisen auf diese Funktion innerhalb der Methode setTimeout. Dieser Code ist einfacher zu lesen als unser ursprungliches Beispiel.

So brechen Sie einen setTimeout-Timer ab

Sie können einen Timer mit der Methode clearTimeout() abbrechen. Dadurch wird die Ausfuhrung eines Timers und des darin enthaltenen Codes gestoppt ein Timer wird nicht ausgefuhrt. Betrachten Sie den folgenden Code:

Dieser Code wird nicht Drucken Sie "Karma!‚" an die Konsole. Dies liegt daran, dass wir unseren Timer mit clearTimeout abbrechen, bevor der Timer setTimer ausgefuhrt werden kann.

Was ist JavaScript setInterval?

Die JavaScript-Methode setInterval() ruft eine Funktion wiederholt auf. Zwischen jedem Aufruf einer Funktion wird eine bestimmte Verzögerung festgelegt.

setIn terval() verwendet eine ähnliche Syntax wie setTimeout():

Sie mussen zwei Parameter angeben, um setInterval zu verwenden:

  • Funktion: Die Funktion, die ausgefuhrt wird.
  • time: Die Zeit zwischen jeden Aufruf der von Ihnen angegebenen Funktion.

Starten Sie einen setInterval JavaScript Timer

Während setTimeout eine Funktion nur einmal ausfuhrt, setInterval fuhrt eine Funktion immer wieder aus. Sie verwendet dieselbe Syntax wie die Methode setTimeout.

Lassen Sie uns eine Funktion erstellen, die den Inhalt eines Arrays von Kaffees an die Konsole ausgibt:

Dieser Code fuhrt die Funktion iterateOverArray wiederholt aus. Zwischen jedem Aufruf dieser Funktion gibt es eine Verzögerung von einer Sekunde (1000 Millisekunden).

Lassen Sie unseren Code ausfuhren:

Das Problem mit diesem Code ist, dass er auch dann weiterl√§uft, wenn er alle Elemente in unserer Liste durchlaufen hat . Wenn alle Elemente in unserer Liste auf der Konsole gedruckt wurden, wird "undefiniert‚" Werte werden auf unbestimmte Zeit ausgegeben.

Die Funktion setInterval wird weiterhin ausgefuhrt, da sie wiederholt wird, bis sie angewiesen wird, zu stoppen. Lassen Sie uns dieses Problem beheben.

So brechen Sie einen setInterval Timer ab

Die Methode clearInterval stoppt die Ausfuhrung einer Methode setInterval weiter.

Lassen Sie uns unseren Timer abbrechen, sobald alle Kaffees auf der Speisekarte auf der Konsole gedruckt sind. Zunächst berechnen wir, wie viele Artikel sich in unserer Kaffeeliste befinden. Dadurch können wir erkennen, wann wir unseren Timer abbrechen sollten.

Als Nächstes fugen wir am Ende unseres Codes eine Funktion hinzu. Diese Funktion stoppt unsere setInterval-Methode, nachdem alle unsere Kaffees auf der Konsole ausgegeben wurden:

Als Nächstes fugen wir am Ende unseres Codes eine Funktion hinzu. Diese Funktion stoppt unsere setInterval-Methode, nachdem alle unsere Kaffees auf der Konsole ausgegeben wurden:

Wir haben unserer Methode setInterval() eine eigene Variable zugewiesen namens printCoffees. Wir haben dann eine setTimeout()-Methode deklariert, die das printCoffees-Zeitintervall abbricht. Diese Methode wird ausgefuhrt, nachdem jeder Kaffee in unserer Liste wiederholt wurde.

Wir berechnen, wie viele Sekunden die Methode setTimeout() warten soll, indem wir die Anzahl der auszudruckenden Kaffees mit 1001 multiplizieren. In unserer Liste sind vier Kaffees gespeichert. Vier multipliziert mit 1000 ergibt 4000, also vier Sekunden.

Wir haben die Zahl 1001 gew√§hlt, damit unser Timer stoppt, nachdem das letzte Array-Element an die Konsole ausgegeben wurde. Wenn wir die Zahl 4000 w√§hlen, wird unsere Methode printCoffees angehalten, bevor der letzte Artikel in unserem "coffees‚" Array in die Konsole.

Lassen Sie unseren Code ausfuhren:

Unser Code stoppt, nachdem alle Elemente in unserer Liste auf der Konsole gedruckt wurden. Es wird nicht mehr auf unbestimmte Zeit ausgefuhrt. Dies liegt daran, dass wir die Methode clearInterval() verwendet haben, um die Methode setInterval() zu stoppen.

setInterval: Ein visuelles Beispiel

Lassen Sie uns etwas HTML verwenden, um zu zeigen, wie die Funktion setInterval funktioniert. Wir werden eine einfache Website erstellen, auf der unsere Kaffeeliste angezeigt wird. Diese Kaffees werden der Site nacheinander hinzugefugt. Wir beginnen damit, ein einfaches Frontend fur das Projekt in einer Datei namens index.html zu erstellen:

Unsere Benutzeroberfläche sieht so aus:

6okXMdjRqVaKAyir5bEYOj8C94vmv NLTTYy4tw3 JLK O2H3r QXrM Blze886bBFFOzVth2mVnmq9E9IKo AmRYMoPdoGhToy4K0rFANOFnqAHmeyn74JellbuBam1m910vvtc

Bisher ist nicht viel los. Das liegt daran, dass wir etwas JavaScript schreiben mussen, damit unsere Kaffees auf der Webseite erscheinen

Starten Sie unser JavaScript, indem Sie unsere Liste auswählen. Öffnen Sie eine Datei namens scripts.js und fugen Sie diesen Code ein:

Dieser Code wählt unser Listenelement aus. Mehr uber getElementById erfahren Sie in unserem Tutorial auf < a href="/javascript-getelementbyidv/">JavaScript getElementById. Dann verwenden wir unseren Code von fruher mit einigen Änderungen, um die Kaffees auf der Webseite anzuzeigen:

In der Funktion iterateOverArray haben wir neuen Code hinzugefugt . Wir haben zuerst createElement() verwendet, um ein neues li-Element zu erstellen. Wir haben dann den Inhalt dieses Elements li auf den Namen eines Kaffees in unserer Liste gesetzt.

Unser Code fugt das Element li zum Element ul in unserer Liste hinzu. Dieser Vorgang wiederholt sich, bis jeder Artikel in unserer Kaffeeliste der Webseite hinzugefugt wurde, wie in unserem letzten Beispiel.

Lassen Sie unseren Code ausfuhren und sehen, was passiert. Nach vier Sekunden unseres Code gibt Folgendes zuruck:

BKdNM1booSj51VOG3Edr4fT1Z53SrHX6tT7RcsPA7tSJ5bGi1IPvOqHEDNNThuDhexK3vOSZ9 JdXWlcfQ0WXyaX2y4lCBr957jjAEkenvoWF27UEWPNpgpExDnX6PwV0wvAO 5u

Es gibt eine Lucke von einer Sekunde zwischen jedem Element in der Liste, das der Webseite hinzugefugt wird.

Schlussfolgerung (und Herausforderung)

setTimeout und setInterval sind JavaScript-Timing-Ereignisse. Die Methode setTimeout fuhrt eine Funktion nach einer Verzögerung aus. setInterval ruft eine Funktion wiederholt mit einer Verzögerung zwischen den einzelnen Aufrufen auf.

Möchten Sie Ihre Fähigkeiten mit diesen Methoden verbessern? Versuchen Sie, eine visuelle Benutzeroberfläche mit HTML und JavaScript fur ein Memory-Spiel zu erstellen.

Das Spiel sollte eine Reihe von funf Wörtern anzeigen, die ein Benutzer sich merken kann. Nachdem die Wörter angezeigt wurden, sollte der Benutzer gefragt werden, an welche Wörter er sich erinnert. Wenn Sie weitere Hilfe beim Erlernen von JavaScript benötigen, lesen Sie unseren Leitfaden zum beste Tutorials fur JavaScript-Anfänger.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method