Fenster setInterval()
Beispiele
Jede Sekunde (1000 Millisekunden) "Hallo" anzeigen:
setInterval(function () {element.innerHTML += "Hello"}, 1000);
displayHello jede Sekunde aufrufen:
setInterval(displayHello, 1000);
Weitere Beispiele unten.
Definition und Verwendung
Die setInterval()Methode ruft eine Funktion in bestimmten Intervallen (in Millisekunden) auf.
Die setInterval()Methode fährt mit dem Aufruf der Funktion fort, bis sie
clearInterval()aufgerufen wird oder das Fenster geschlossen wird.
1 Sekunde = 1000 Millisekunden.
Notiz
Um die Funktion nur einmal auszuführen, verwenden setTimeout()Sie stattdessen die Methode.
Verwenden Sie zum Löschen eines Intervalls die von setInterval () zurückgegebene ID:
myInterval = setInterval(function, milliseconds);
Dann können Sie die Ausführung stoppen, indem Sie clearInterval() aufrufen:
clearInterval(myInterval);
Siehe auch:
Syntax
setInterval(function, milliseconds, param1, param2, ...)
Parameter
| Parameter | Description |
| function | Required. The function to execute |
| milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
| param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
Rückgabewert
| Typ | Beschreibung |
| Eine Zahl | Die ID des Timers. Verwenden Sie diese ID mit clearInterval(), um den Timer abzubrechen. |
Mehr Beispiele
Beispiel
Anzeige der Uhrzeit wie bei einer Digitaluhr:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
Beispiel
Verwenden von clearInterval() zum Stoppen der Digitaluhr:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
Beispiel
Verwenden von setInterval() und clearInterval() zum Erstellen eines dynamischen Fortschrittsbalkens:
function move() {
const element = document.getElementById("myBar");
let width = 0;
let id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + '%';
}
}
}
Beispiel
Alle 500 Millisekunden zwischen zwei Hintergrundfarben umschalten:
const myInterval = setInterval(setColor, 500);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myInterval);
}
Beispiel
Parameter an die Funktion übergeben (funktioniert nicht in IE9 und früher):
setInterval(myFunc, 2000, "param1", "param2");
Wenn Sie jedoch eine anonyme Funktion verwenden, funktioniert sie in allen Browsern:
setInterval(function() {myFunc("param1", "param2")}, 2000);
Browser-Unterstützung
setInterval()wird in allen Browsern unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |