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

Detaillierte Erklärung der Javascript-String-Methoden

Inhaltsverzeichnis Zeichenfolgenlänge: Länge char...

So starten Sie das Spring-Boot-Projekt mit dem integrierten Linux-System in Win10

1. Installieren Sie das integrierte Linux-Subsyst...

Perfektes Installationstutorial für das Dualsystem Win10 + Ubuntu 16.04 [detailliert]

Denken Sie unbedingt daran, Ihre Daten zu sichern...

So zeigen Sie in CocosCreator eine Textur an der Wischposition an

Inhaltsverzeichnis 1. Projektanforderungen 2. Dok...

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Ubuntu 18.04, andere Versionen von Ubuntu Frage: ...

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Inhaltsverzeichnis Natives JS So senden Sie eine ...

So erlauben Sie den Remotezugriff auf offene Ports in Linux

1. Ändern Sie die Firewall-Konfigurationsdatei # ...

Detaillierte Erläuterung der Verwendung von var () von CSS3 zum Ändern von SCSS-Variablenwerten zur Laufzeit

var() Einführung und Verwendung Details (MDN) IE ...

mysqldump-Parameter, die Sie möglicherweise nicht kennen

Im vorherigen Artikel wurde erwähnt, dass die in ...

Node+Express zum Erzielen eines Paging-Effekts

In diesem Artikel wird der spezifische Code von n...

Detaillierter Vergleich von Ember.js und Vue.js

Inhaltsverzeichnis Überblick Warum ein Framework ...

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

Vorwort Ich habe im Internet schon viele Artikel ...

Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien

Das Linux-System ist ein typisches Mehrbenutzersy...

Methode und Optimierungsprinzip für langsame MySQL-Abfragen

1. Zum Vergleich der Datumsgröße muss das an XML ...

Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

1. Aktivieren Sie den Remotezugriff auf den Docke...