Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von setTimeout() in JavaScript

Detaillierte Erläuterung der Verwendung von setTimeout() in JavaScript

黄舟Original: 2017-12-04 10:24:431974Durchsuche

Die setTimeout-Methode in JavaScript ist weit verbreitet. Sie wird normalerweise verwendet, wenn die Seite aktualisiert wird, die Ausführung verzögert wird usw. Viele JavaScript-Neulinge wissen jedoch immer noch nicht viel über die Verwendung von setTimeout. Heute werde ich Ihnen JavaScript ausführlich erklären.

Verwendung von setTimeout

Lassen Sie uns gemeinsam einen Fall ausführen. Öffnen Sie zuerst Notepad, fügen Sie den folgenden Code ein und führen Sie den Effekt aus!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert(&#39;对不起, haorooms博客要你等候多时&#39;)", 3000 )
</script>

</body> 
</html>

Nach drei Sekunden Verweilen wird auf der Seite ein Bilderrahmen angezeigt! In diesem Fall wird die grundlegendste Syntax von setTimeout verwendet und setTimeout wird nicht automatisch wiederholt!

setTimeout kann auch Funktionen ausführen, und zwar wiederholt! Lassen Sie uns gemeinsam einen anderen Fall bearbeiten:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

Sie können sehen, dass sich die Zahl im Eingabetextfeld jede Sekunde erhöht! Deshalb kann setTimeout auch Zeitsprünge in Webseiten machen!

Ohne einen Fall wird das Lernen nicht schnell gehen. Lassen Sie uns gemeinsam ein weiteres Beispiel erstellen, um die Zeit zu berechnen, die Sie auf einer bestimmten Seite von haorooms verbringen:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

Wie wäre es mit dem obigen Beispiel? Ich glaube, Sie verstehen die Verwendung von setTimeout()!

Zusammenfassung:

Anhand der obigen Erklärung frage ich mich, ob Sie setTimeout verstehen und ob Sie setTimeout beim nächsten Mal sehr gut verwenden können . Ich hoffe, es hilft bei Ihrer Arbeit!

Verwandte Empfehlungen:

setTimeout-Instanz

setTimeout()-Funktion in js

Detaillierte Erläuterung von Anwendungsbeispielen der Javascript-Funktion setTimeout mit Parametern

Lassen Sie uns über das Ereignisschleifenmodell von setTimeout sprechen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von setTimeout() in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS-Bild-Diashow-Umschalteffekt wechselnNächster Artikel：JS-Bild-Diashow-Umschalteffekt wechseln

In Verbindung stehende Artikel

Mehr sehen