suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie die setTimeout-Methode

So verwenden Sie die setTimeout-Methode

不言
不言Original
2019-01-30 16:26:2122933Durchsuche

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.

So verwenden Sie die setTimeout-Methode

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

So verwenden Sie die setTimeout-Methode

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

So verwenden Sie die setTimeout-Methode

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!

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：So verwenden Sie die setInterval-MethodeNächster Artikel：So verwenden Sie die setInterval-Methode

In Verbindung stehende Artikel

Mehr sehen