Zusammenfassung der Verwendung von setTimeout() in JavaScript

Zusammenfassung der Verwendung von setTimeout() in JavaScript

1. Einleitung

Die setTimeout Methode von js ist sehr nützlich und wird normalerweise zum Aktualisieren der Seite, zur verzögerten Ausführung usw. verwendet. Viele JavaScript-Neulinge verstehen die Verwendung von setTimeout jedoch immer noch nicht. Obwohl ich seit mehr als zwei Jahren javascript lerne und anwende, muss ich manchmal immer noch Informationen zur setTimeout -Methode nachschlagen. Heute werde ich eine systematische Zusammenfassung der setTimeout -Methode von js machen.

2. Der Unterschied zwischen setInterval und setTimeout

Wenn man über setTimeout spricht, denkt man leicht an setInterval , da die beiden Verwendungen ähnlich sind, es aber Unterschiede gibt. Lassen Sie uns sie heute zusammenfassen!

3. setTimeout

Definition und Verwendung: setTimeout() wird verwendet, um nach einer angegebenen Anzahl von Millisekunden eine Funktion aufzurufen oder einen Ausdruck auszuwerten.

Syntax: setTimeout(code,millisec)

Parameter: Code (erforderlich): Die JavaScript Codezeichenfolge, die nach dem Aufruf der Funktion ausgeführt werden soll. millisec (erforderlich): Die Anzahl der Millisekunden, die vor der Ausführung des Codes gewartet werden soll.

Tipp: setTimeout() führt den Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval() oder lassen Sie den Code selbst setTimeout() erneut aufrufen.

Intervall festlegen:

setInterval() ruft in einem angegebenen Zeitraum (in Millisekunden) eine Funktion auf oder wertet einen Ausdruck aus.

setInterval() ruft die Funktion kontinuierlich auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der setInterval() 返ID-Wert kann als Parameter für clearInterval() verwendet werden.

Syntax: setInterval(code,millisec[,"lang"])

Parameter: code . Die aufzurufende Funktion oder die auszuführende Codezeichenfolge. millisec erforderlich. Das Zeitintervall zwischen periodischen Ausführungen oder Aufrufen von code in Millisekunden.

Rückgabewert: Ein Wert, der an Window.clearInterval() übergeben werden kann, um die periodische Ausführung von code abzubrechen.

Der Unterschied:

Wie oben zu sehen ist, sind die Hauptunterschiede zwischen setTimeout und setinterval :

setTimeout wird nur einmal ausgeführt, d. h. wenn die festgelegte Zeit abgelaufen ist, wird die Ausführung des angegebenen Codes ausgelöst und beendet, wenn dieser abgeschlossen ist. Wenn Sie denselben setTimeout -Befehl im laufenden Code erneut ausführen, kann es zu einer Schleife kommen. (Das heißt, um in einer Schleife ausgeführt zu werden, muss die Funktion selbst setTimeout() erneut aufrufen.)

setinterval wird in einer Schleife ausgeführt, d. h. es löst den angegebenen Code jedes Mal aus, wenn das eingestellte Zeitintervall erreicht wird. Dies ist ein echter Timer.

setinterval ist einfach zu verwenden, während setTimeout flexibler ist. Sie können die Schleife jederzeit verlassen und sie so einstellen, dass sie in unregelmäßigen Zeitabständen ausgeführt wird, z. B. 1 Sekunde beim ersten Mal, 2 Sekunden beim zweiten Mal und 3 Sekunden beim dritten Mal.

Persönlich verwende ich lieber setTimeout!

4. Verwendung von setTimeout

Lassen Sie uns gemeinsam einen Fall durchgehen. Öffnen Sie zunächst den Editor, fügen Sie den folgenden Code ein und führen Sie ihn aus, um die Wirkung zu sehen!

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
</Kopf>
<Text>
<h1> <font color=blue> Demonstrationsseite des Haorooms-Blogs</font> </h1>
<p>Bitte warten Sie drei Sekunden!</p>

<Skript>
setTimeout("alert('Entschuldigung, der Blog von haorooms hat Sie so lange warten lassen')", 3000 )
</Skript>

</body> 
</html>

Nach drei Sekunden Verweildauer auf der Seite wird ein Bilderrahmen eingeblendet! In diesem Fall wird die grundlegendste Syntax von setTimeout angewendet. setTimeout wird nicht automatisch wiederholt!

setTimeout kann auch function ausführen und diese wiederholt ausführen!

Lassen Sie uns gemeinsam einen weiteren Fall bearbeiten:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<Skript>
var x = 0
Funktion countSecond()
{
   x = x+1
 document.haorooms.haoroomsinput.value=x
 setTimeout("AnzahlSekunden()", 1000)
}
</Skript>
</Kopf>
<html>
<Text>

<form name="haorooms">
   <Eingabetyp="Text" Name="haoroomsinput"Wert="0" Größe=4 >
</form>

<Skript>
Sekunden zählen()
</Skript>

</body> </html>

Wir können sehen, dass die Zahl im input von Sekunde zu Sekunde steigt! Daher kann setTimeout auch Zeitsprünge in Webseiten bewirken!

Ohne Beispiele wird das Lernen nicht schnell vonstatten gehen. Lassen Sie uns ein weiteres Beispiel machen, um Ihre Verweildauer auf einer bestimmten Seite von haorooms zu berechnen:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<Skript>
x=0
y=-1
Funktion countMin()
{ y = y + 1
 document.displayMin.displayBox.value=y
 setzeTimeout("AnzahlMin()",60000)
}
Funktion countSec()
{ x = x + 1
 z = x % 60
 document.displaySec.displayBox.value=z
 setTimeout("AnzahlSek.()", 1000)
}
</script> </head>
<Text>
<table> <tr valign=top> <td> Ihre Verweildauer im haorooms-Blog beträgt: </td>
<td> 
<Formularname=AnzeigeMin>
   <Eingabetyp=Textname=Anzeigenfeldwert=0 Größe=4 >
</form> 
</td>
<td> Punkte</td>
<td> 
<Formularname=AnzeigeSec> </td>
<td> <Eingabetyp=Textname=Anzeigenfeldwert=0 Größe=4 >
</form>
 </td>
<td> Sekunden. </td> </tr>
 </Tabelle>
<Skript>
AnzahlMin()
AnzahlSek.()
</Skript>
</body>
</html>

Wie wäre es? Ich glaube, Sie haben anhand der obigen Beispiele die Verwendung von setTimeout（） verstanden!

5. Zeitüberschreitung löschen ()

Werfen wir einen Blick auf clearTimeout( ) .

clearTimout() hat die folgende Syntax:

clearTimeout(timeoutID)

Um clearTimeout( ) zu verwenden, müssen wir, wenn wir setTimeout( ) setzen, diesem setTimout( ) einen Namen geben, nämlich timeoutID . Wenn wir es stoppen, verwenden wir diese timeoutID , um es zu stoppen. Dies ist ein benutzerdefinierter Name, aber viele Leute nennen es timeoutID .

Im folgenden Beispiel werden zwei timeoutID festgelegt, die jeweils „meter1“ und „meter2“ heißen.

wie folgt:

timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)

Indem Sie beim Festlegen clearTimeout( ) die timeoutID -Namen meter1 und meter2 verwenden, können Sie angeben, welches setTimeout( ) wirksam ist, ohne die Ausführung eines anderen setTimeout() zu beeinträchtigen.

Bitte sehen Sie sich unten das Beispiel für clearTimeout() an.

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">

<Skript>
x = 0
y = 0
Funktion count1()
{ x = x + 1
 Dokument.Anzeige1.Box1.Wert = x
 meter1=setTimeout("Anzahl1()", 1000)
}
Funktion count2()
{ y = y + 1
 Dokument.Anzeige2.Box2.Wert = y
 meter2 = setzeTimeout("Anzahl2()", 1000)
}
</script> </head>
<Text> 
<p> </br>
<Formularname="Anzeige1">
    <Eingabetyp="Text" Name="Box1" Wert="0" Größe=4 >
    <input type=button value="Zeitmessung stoppen" onClick="clearTimeout(meter1) " >
    <input type=button value="Zeitmessung fortsetzen" onClick="count1()" >
</form>
<p>
<Formularname="Anzeige2">
    <Eingabetyp="Text" Name="Box2" Wert="0" Größe=4 >
    <input type=button value="Zeitmessung stoppen" onClick="clearTimeout(meter2) " >
    <input type=button value="Zeitmessung fortsetzen" onClick="count2()" >
</form>

<Skript>
    Anzahl1()
    Anzahl2()
</Skript>
</body>
</html>

6. Fazit

Dies ist das Ende dieses Artikels über die Nutzungsübersicht von setTimeout() in JavaScript. Weitere Informationen zur Verwendung von setTimeout() in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Was sind die grundlegenden Verwendungszwecke von JavaScript setTimeout()
  • JavaScript setInterval() vs setTimeout() Timer
  • Detaillierte Erklärung der JavaScript-Timer setTimeout() und setInterval()
  • Lösung für das Problem, dass setTimeout() in JS keine Funktionen mit Parametern aufrufen kann
  • Beispiel zur Erklärung der Verwendung von setTimeout() in JS
  • Eine kurze Analyse der Anwendungsbeispiele von setTimeout() und clearTimeout() in js
  • Zu beachtende Probleme bei der Verwendung der Closure-Funktion von Javascripts setTimeout()
  • Einführung und Anwendung der js setTimeout() Funktion am Beispiel eines Countdowns

<<:  Implementierung der MySQL GRANT-Benutzerautorisierung

>>:  Warum kann mein Tomcat nicht starten?

Artikel empfehlen

Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument

ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...

So bereinigen Sie den von Docker belegten Speicherplatz

Docker nimmt viel Platz ein. Immer wenn wir Conta...

HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren

Fallbeschreibung: - Verwenden Sie Tabellen, um Se...

Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird

Vorwort Wir alle wissen, dass MySQL-Abfragen den ...

Implementierung des React Page Turner (inkl. Front- und Backend)

Inhaltsverzeichnis Frontend Entwerfen und schreib...

XHTML verwendet einige veraltete Elemente in HTML nicht mehr

Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...

Textmodus im IE! Einführung in die Rolle von DOCTYPE

Nachdem das im vorherigen Artikel besprochene Prob...

CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

Hintergrund Bevor wir mit dem Artikel beginnen, w...

Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

Inhaltsverzeichnis Vorbereitende Vorbereitung Ber...

So entwerfen und erstellen Sie adaptive Webseiten

Mit der Verbreitung von 3G nutzen immer mehr Mens...

Lösung für die Systemstörung (Booten nicht möglich), die durch das Upgrade von glibc in Centos7 verursacht wurde

Inhaltsverzeichnis Ursache des Problems: Lösung: ...

Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten

Die Methode zum Abrufen der Zeigerposition in Jav...

MySQL 5.7.21 Installations- und Konfigurations-Tutorial unter Windows 10

Dieser Artikel zeichnet die Installations- und Ko...

So entwickeln Sie Uniapp mit vscode

Da ich immer vscode zur Entwicklung von Front-End...

Detaillierte Erläuterung der Installation von Anwendungen in Linux Centos7 ohne Internetverbindung

1. Im vorherigen Kapitel haben wir gelernt, dass ...