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

Mein CSS-Architekturkonzept – es ist von Person zu Person unterschiedlich, es gibt kein Bestes, nur das Passende

Vorwort <br />Ich arbeite schon eine ganze W...

Vue3 AST Parser-Quellcode-Analyse

Inhaltsverzeichnis 1. Generieren Sie einen abstra...

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Inhaltsverzeichnis Saltstack stellt Zabbix-Dienst...

JavaScript realisiert Lupen-Spezialeffekte

Der zu erzielende Effekt: Wenn die Maus auf das k...

Beispiele für korrekte Beurteilungsmethoden für Datentypen in JS

Inhaltsverzeichnis Vorwort Kann typeof den Typ ko...

Detaillierte Erklärung zum Problem der CSS-Klassennamen

Die folgenden CSS-Klassennamen, die mit einer Zah...

CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken

1. Verwenden Sie CSS, um ein kleines Chat-Dialogf...

Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?

Inhaltsverzeichnis Primärschlüsselindex Erstellen...

JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Einführung Ich habe schon einmal ein Problem fest...

Beispiele für einige Verwendungstipps für META-Tags in HTML

HTML-Meta-Tag HTML-Meta-Tags können verwendet wer...

Als der Interviewer nach dem Unterschied zwischen char und varchar in mysql fragte

Inhaltsverzeichnis Unterschied zwischen char und ...

Analyse mehrerer Gründe, warum Iframe weniger verwendet werden sollte

Die folgende Grafik zeigt, wie zeitaufwändig es is...

In einem Artikel erfahren Sie, wie Sie mit js den Sperrfeuereffekt erzielen

Inhaltsverzeichnis Erstellen Sie eine neue HTML-D...

Tiefgreifendes Verständnis der MySQL-Selbstverbindung und Join-Assoziation

1. MySQL-Selbstverbindung MySQL muss beim Abfrage...

Detaillierte Erläuterung der TCPdump-Befehlsbeispiele in Linux

Vorwort Einfach ausgedrückt ist tcpdump ein Paket...