Timer in JavaScript

Zeitfunktionen sind Funktionen, die es uns ermöglichen, Funktionen zu einem bestimmten Zeitpunkt auszuführen.

Mit Zeitfunktionen können Sie die Ausführung des Codes verzögern, um sicherzustellen, dass der Code nicht genau zur richtigen Zeit ausgeführt wird, wenn das Ereignis ausgelöst wird.

JavaScript中有两个计时函数：

• setTimeout(function, milliseconds) -等待指定的毫秒数后执行函数(function)

• setInterval(function, milliseconds) -与setTimeout()相同，但是连续重复执行该函数(function)

这两个setTimeout()和setInterval()是方法窗口对象，可以在不窗口前缀被写入。

setTimeout()方法

setTimeout()方法用于在一段时间后仅执行一次函数或指定的代码段。

Syntax:

window.setTimeout(function, milliseconds)

第一个参数是要执行的函数。

第二个参数指示执行前的毫秒数（1秒= 1000毫秒）。

以下示例在单击按钮2秒钟后将显示警报消息：

<button onclick="setTimeout(myFunc,　2000)">Click</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

停止执行代码

clearTimeout()方法停止执行setTimeout()中指定的函数。

Syntax:

window.clearTimeout(var)

clearTimeout()方法使用从setTimeout()返回的变量。

　　t = setTimeout();
　　clearTimeout(t);

如果尚未执行该函数，则可以通过调用clearTimeout()方法来停止执行。

Gleiche Beispiele wie oben, aber mit einem „Stop“-Knopf hinzugefügt:

<button onclick="myFunc()">Click</button>
<button onclick="myStopFunc()">Stop the alert</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function(){ alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

setInterval()方法

setInterval()方法重复调用一个函数，每次调用之间有固定的时间延迟。

Syntax:

window.setInterval(function, milliseconds)

第一个参数是要执行的函数。

第二个参数指示每次执行之间的时间间隔的长度。

本示例每秒执行一次称为“startTimer”的功能（如数字手表）：

//jedes1s einmal ausführen
setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

停止执行代码

clearInterval()Die Methode stoppt die Ausführung der Funktion, die in setInterval() angegeben ist.

Syntax:

window.clearInterval(var)

clearInterval()Verwenden Sie das Variable, das von setInterval() zurückgegeben wird.

　　t = setInterval();
　　clearInterval(t);

Gleiche Beispiele wie oben, aber mit einem „Stop“-Knopf hinzugefügt:

//jedes1s einmal ausführen
var t = setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Abbrechen Sie die Verwendung von setInterval() erzeugte wiederholte Aktionen
function stopTimer() {
　　　clearInterval(t);
}

Mehr Beispiele

Klicken Sie auf die Schaltfläche „Starten Sie die Zählung“ unten, um den Timer zu starten. Klicken Sie auf die Schaltfläche „Zählung stoppen“ zum Stoppen der Zählung:

Klicken Sie auf die Schaltfläche „Starten Sie den Fortschritt“ unten, um die Fortschrittsleiste zu starten. Klicken Sie auf die Schaltfläche „Fortschritt stoppen“, um die Fortschrittsleiste zu stoppen: