Zusammenfassung der Verwendung von setTimeout() in JavaScript

Inhaltsverzeichnis

1. Einleitung
2. Der Unterschied zwischen setInterval und setTimeout
3. setTimeout
4. Verwendung von setTimeout
5. Zeitüberschreitung löschen ()
6. Fazit

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?

Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4

Zusammenfassung der Verwendung von setTimeout() in JavaScript

Inhaltsverzeichnis

1. Einleitung

2. Der Unterschied zwischen setInterval und setTimeout

3. setTimeout

4. Verwendung von setTimeout

5. Zeitüberschreitung löschen ()

6. Fazit

Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4

So verwenden Sie HTML-CSS, um zu steuern, dass Div oder Tabellen an einer bestimmten Position fixiert werden

VUE implementiert Token-Anmeldeüberprüfung

Detaillierte Erklärung zum Einrichten eines DNS-Servers unter Linux

js canvas implementiert den Bestätigungscode und erhält die Bestätigungscodefunktion

Detaillierte Analyse des langsamen Abfrageproblems beim Senden von MySQL-Daten

Vue3 (V) Details zur Integration der HTTP-Bibliothek axios

Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue

Centos7 installiert mysql5.6.29 Shell-Skript

Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek

Artikel empfehlen

MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

MySQL-Grundlagen in 1 Stunde

Beispiel für die Implementierung eines Übersetzungseffekts (transfrom: translate) mit CSS3

Docker startet im Status „Beendet“

Echart Bar-Doppelsäulendiagrammstil, umfassendste und detaillierteste Erklärung

Lösung für den Fehler beim Starten von MySQL

Lösung für den Fehler von 6ull beim Laden des Linux-Treibermoduls

Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen

Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy

Detaillierte Erklärung des Sandbox-Mechanismus von Vue3

Lösung für das Problem, dass die Seite leer ist, wenn die Seite mit der Quelldatei in IE7 geöffnet wird

Wie stellt MySQL die Master-Slave-Konsistenz sicher?

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Detaillierte Erklärung der grundlegenden Verwendung der Hilfsfunktion MapGetters in Vuex

Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung