Heim > Artikel > Web-Frontend > So verwenden Sie die setTimeout-Methode
So verwenden Sie die setTimeout-Methode
- 不言Original
- 2019-01-30 16:26:2122788Durchsuche
Die Methode setTimeout() ruft die Funktion nach der in Millisekunden angegebenen Zeit auf. Die Methode setTimeout erfordert zwei Parameter: einen Verweis auf die Callback-Funktion und eine Verzögerung in Millisekunden Methode. Spezifische Verwendung.
Werfen wir zunächst einen Blick auf die grundlegende Syntax von setTimeout
setTimeout(function, milliseconds, param_one, param_two, ...)
Um setTimeout zu stoppen und die Ausführung der Funktion zu verhindern, müssen Sie „clearTimeout“ verwenden ()-Methode.
Die Methode setTimeout() gibt eine ID zurück, die in der Methode clearTimeout() verwendet werden kann.
Schauen wir uns ein einfaches Beispiel an
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<body>
<script>
var sampleVar;
function sampleFunction(){
sampleVar = setTimeout(alertFunc, 2000);
}
function alertFunc(){
alert("Two seconds have passed!");
}
sampleFunction();
</script>
</body>
</html>Der obige Code öffnet nach 2 Sekunden ein Popup-Fenster.
Beispiel 2
In diesem Beispiel ändert sich der Text des Elements alle 2 Sekunden (3 Mal). Dazu muss die ID eines HTML-Elements auf „counter“ gesetzt werden.
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<body>
<p>单击下面的按钮。输入字段将显示经过2、4和6秒。</p>
<button onclick="timedText()">Display timed text</button>
<input type="text" id="text">
<script>
function timedText() {
var x = document.getElementById("text");
setTimeout(function(){ x.value="2 seconds" }, 2000);
setTimeout(function(){ x.value="4 seconds" }, 4000);
setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>
</body>
</html>Der Anzeigeeffekt im Browser ist wie folgt
Wenn Sie auf die Schaltfläche links klicken , der Vorgang wird im Textfeld 2, 4, 6 Sekunden angezeigt
Dieses Beispiel stoppt „timeout“, wenn „samplestopfunction“ aufgerufen wird, bevor der Timer abgelaufen ist.
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<body>
<p>等待3秒钟后，单击第一个按钮显示“Hi”。</p>
<p>单击第二个按钮以阻止执行第一个函数<br>（必须在3秒钟前单击它）</p>
<button onclick="sampleFunction()">Try it</button>
<button onclick="sampleStopFunction()">Stop the alert</button>
<script>
var sampleVar;
function sampleFunction() {
sampleVar = setTimeout(function(){ alert("Hi") }, 2000);
}
function sampleStopFunction() {
clearTimeout(sampleVar);
}
</script>
</body>
</html>Der Anzeigeeffekt im Browser ist wie folgt
Dieser Artikel endet hier, weitere spannende Inhalte Sie können auf die entsprechenden Kolumnen-Tutorials auf der chinesischen PHP-Website achten! ! !
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die setTimeout-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!