Window: Methode setInterval()

Syntax

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, param1)
setInterval(func, delay, param1, param2)
setInterval(func, delay, param1, param2, /* …, */ paramN)

Parameter

func

Eine Function, die alle delay Millisekunden ausgeführt wird. Die erste Ausführung erfolgt nach delay Millisekunden.

code

Ein TrustedScript oder eine Zeichenfolge mit beliebigem Code, der alle delay Millisekunden kompiliert und ausgeführt wird. Dies kann anstelle einer Funktion übergeben werden, wird aber aus denselben Gründen, aus denen eval() ein Sicherheitsrisiko darstellt, dringend abgeraten.

delay Optional

Die Wartezeit zwischen den Ausführungen der angegebenen Funktion oder des Codes in Millisekunden. Wird kein Wert angegeben, beträgt sie standardmäßig 0. Einzelheiten zum zulässigen Wertebereich von delay finden Sie weiter unten unter Beschränkungen der Wartezeit.

param1, …, paramN Optional

Zusätzliche Argumente, die nach Ablauf des Timers an die durch func angegebene Funktion übergeben werden.

Rückgabewert

Eine positive Ganzzahl (üblicherweise im Bereich von 1 bis 2.147.483.647), die den durch den Aufruf erzeugten Intervall-Timer eindeutig identifiziert.

Diese Kennung, oft als „Intervall-ID“ bezeichnet, kann an clearInterval() übergeben werden, um die wiederholte Ausführung der angegebenen Funktion zu beenden.

Ausnahmen

SyntaxError

code kann nicht als Skript geparst werden.

TypeError

Wird ausgelöst, wenn der Parameter code auf eine Zeichenfolge gesetzt ist, während Trusted Types durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist. Der Fehler wird auch ausgelöst, wenn der erste Parameter keinem der unterstützten Typen entspricht: Funktion, Zeichenfolge oder TrustedScript.

Beschreibung

Die Funktion setInterval() wird häufig verwendet, um Funktionen wie Animationen in regelmäßigen Abständen wiederholt auszuführen. Sie können das Intervall mit clearInterval() beenden.

Wenn Ihre Funktion nach der angegebenen Wartezeit nur einmal aufgerufen werden soll, verwenden Sie setTimeout().

Beschränkungen der Wartezeit

Intervalle können verschachtelt werden: Der Callback von setInterval() kann seinerseits setInterval() aufrufen, um ein weiteres Intervall zu starten, während das erste noch läuft. Um mögliche Leistungseinbußen zu begrenzen, erzwingt der Browser bei einer Verschachtelungstiefe von mehr als fünf Ebenen automatisch einen Mindestwert von 4 ms für das Intervall. Werte unter 4 ms werden bei stark verschachtelten Aufrufen von setInterval() auf 4 ms angehoben.

Unter bestimmten Umständen können Browser noch strengere Mindestwerte für das Intervall erzwingen; dies sollte jedoch selten vorkommen. Beachten Sie außerdem, dass die tatsächlich zwischen Callback-Aufrufen verstrichene Zeit länger sein kann als der angegebene Wert für delay. Beispiele finden Sie unter Gründe für längere als die angegebenen Wartezeiten.

Intervall-IDs werden mit setTimeout() geteilt

Die Methode gibt eine Kennung zurück, die den durch den Aufruf erzeugten Intervall-Timer eindeutig identifiziert. Diese Kennung, oft als „Intervall-ID“ bezeichnet, kann an clearInterval() übergeben werden, um die wiederholte Ausführung der angegebenen Funktion zu beenden.

Innerhalb derselben globalen Umgebung (z. B. eines bestimmten Fensters oder Workers) bleibt die Intervall-ID garantiert eindeutig und wird keinem neuen Intervall-Timer zugewiesen, solange der ursprüngliche Timer aktiv ist. Verschiedene globale Umgebungen verwalten jedoch jeweils eigene, voneinander unabhängige Mengen von Intervall-IDs.

Beachten Sie, dass setInterval() und setTimeout() dieselbe Menge von IDs verwenden und dass clearInterval() und clearTimeout() technisch austauschbar sind. Der Übersichtlichkeit halber sollten Sie dennoch jeweils die passende Methode verwenden, um Verwechslungen bei der Pflege Ihres Codes zu vermeiden.

Stellen Sie sicher, dass die Ausführungsdauer kürzer als das Intervall ist

Falls Ihre Logik möglicherweise länger für die Ausführung benötigt als die Dauer des Intervalls, empfiehlt es sich, eine benannte Funktion mithilfe von setTimeout() rekursiv aufzurufen. Wenn Sie beispielsweise mit setInterval() alle fünf Sekunden einen entfernten Server abfragen, können Netzwerklatenz, ein nicht reagierender Server und zahlreiche andere Probleme verhindern, dass die Anfrage innerhalb der vorgesehenen Zeit abgeschlossen wird. Dadurch können sich XHR-Anfragen anstauen, deren Antworten nicht unbedingt in der Reihenfolge der Anfragen eintreffen.

In solchen Fällen ist ein rekursives Muster mit setTimeout() vorzuziehen:

(function loop() {
  setTimeout(() => {
    // Your logic here

    loop();
  }, delay);
})();

Im obigen Codefragment wird eine benannte Funktion loop() deklariert und sofort ausgeführt. Nachdem die Logik vollständig ausgeführt wurde, wird loop() innerhalb von setTimeout() rekursiv aufgerufen. Dieses Muster garantiert zwar keine Ausführung in festen Zeitabständen, stellt aber sicher, dass die vorherige Ausführung abgeschlossen ist, bevor der nächste Aufruf erfolgt.

Funktionen werden mit dem globalen this aufgerufen

Für die an setInterval() übergebenen Funktionen gelten bei der Bestimmung der Referenz von this die üblichen Regeln für Funktionsaufrufe. Diese Problematik wird in der JavaScript-Referenz ausführlich erläutert.

Bei Funktionen, die keine Pfeilfunktionen sind, wird der this-Kontext auf das Objekt globalThis gesetzt (in Browsern ein Alias für window).

Das folgende Beispiel zeigt, wie dies zu unerwartetem Verhalten führen kann. Wenn wir die Methode counter.count direkt an setInterval() übergeben, geht der this-Kontext verloren. Die Methode wird dann für das globale Objekt statt für die Counter-Instanz aufgerufen. Dadurch entsteht ein TypeError, wenn die Methode count versucht, auf this zuzugreifen:

class Counter {
  constructor() {
    this.data = new Map();
  }

  count(item) {
    this.data.set(item, (this.data.get(item) || 0) + 1);
  }
}

const counter = new Counter();

counter.count("foo"); // Successfully adds "foo" to the map
setInterval(counter.count, 1000, "bar");
// TypeError: Cannot read properties of undefined (reading 'set')

Um dies zu vermeiden, müssen Sie sicherstellen, dass die an setInterval übergebene Funktion den richtigen this-Kontext hat. Dafür gibt es drei wesentliche Möglichkeiten:

1. Wenn Sie den this-Kontext ausdrücklich festlegen möchten, übergeben Sie die Methode nicht direkt. Schließen Sie den Methodenaufruf stattdessen in eine weitere anonyme Funktion ein, die die Methode ausdrücklich mit dem richtigen Kontext aufruft:

   js

   setInterval(() => counter.count("bar"), 1000);
   setInterval(function () {
     counter.count("bar");
   }, 1000);
   

2. Wenn Sie den this-Kontext des Codes verwenden möchten, der setInterval() aufruft, verwenden Sie immer eine Pfeilfunktion. Diese übernimmt den this-Kontext des umgebenden Gültigkeitsbereichs:

   js

   class Counter {
     // …
     repeatedCount(item) {
       // BAD: the `this` context is lost in the callback
       setInterval(function () {
         this.data.set(item, (this.data.get(item) || 0) + 1);
       }, 1000);
     }
   }
   

   js

   class Counter {
     // …
     repeatedCount(item) {
       // GOOD: the arrow function inherits the `this` context of `repeatedCount()`
       setInterval(() => {
         this.data.set(item, (this.data.get(item) || 0) + 1);
       }, 1000);
     }
   }
   

3. Wenn Sie zusätzliche Funktionshüllen vermeiden möchten (die den Speicherverbrauch erhöhen), den this-Kontext aber ausdrücklich festlegen wollen, können Sie mit der Methode Function.prototype.bind() eine neue Funktion mit dem richtigen this-Kontext erstellen:

   js

   setInterval(counter.count.bind(counter), 1000, "bar");
   

Sicherheitsaspekte

Mit der Methode lassen sich beliebige Eingaben ausführen, die über den Parameter code übergeben werden. Wenn die Eingabe eine potenziell unsichere, von einem Benutzer bereitgestellte Zeichenfolge ist, kann dies einen Angriffsvektor für Cross-Site-Scripting (XSS) darstellen.

Der folgende Code zeigt beispielsweise, wie setInterval() von einem Benutzer bereitgestellten untrustedCode ausführen könnte:

const untrustedCode = "alert('Potentially evil code!');";
const id = setInterval(untrustedCode, 1000);

Websites mit einer Content Security Policy (CSP), die script-src oder default-src festlegt, verhindern standardmäßig die Ausführung solchen Codes. Sie können unsafe-eval in Ihrer CSP angeben, damit setInterval() den Code ausführen kann. Dies ist jedoch unsicher, da dadurch einer der wichtigsten Schutzmechanismen der CSP deaktiviert wird.

Weitere Informationen finden Sie unter Inline-JavaScript im CSP-Leitfaden.

Wenn Sie die Ausführung der Skripte über setInterval() zulassen müssen, können Sie diese Risiken verringern, indem Sie stets TrustedScript-Objekte statt Zeichenfolgen zuweisen und mit der CSP-Direktive require-trusted-types-for Trusted Types erzwingen. Dadurch wird sichergestellt, dass die Eingabe eine Transformationsfunktion durchläuft.

Damit setInterval() den Code ausführen kann, müssen Sie zusätzlich das Schlüsselwort trusted-types-eval in der CSP-Direktive script-src angeben. Es wirkt wie unsafe-eval, erlaubt die Auswertung durch die Methode aber nur, wenn Trusted Types aktiviert sind. Mit unsafe-eval wäre die Ausführung dagegen auch in Browsern erlaubt, die Trusted Types nicht unterstützen.

Die für Ihre Website erforderliche CSP könnte beispielsweise so aussehen:

Content-Security-Policy: require-trusted-types-for 'script'; script-src '<your_allowlist>' 'trusted-types-eval'

Das Verhalten der Transformationsfunktion hängt vom konkreten Anwendungsfall ab, für den ein vom Benutzer bereitgestelltes Skript erforderlich ist. Wenn möglich, sollten Sie die zulässigen Skripte auf genau den Code beschränken, dessen Ausführung Sie vertrauen. Ist das nicht möglich, können Sie die Verwendung bestimmter Funktionen innerhalb der bereitgestellten Zeichenfolge erlauben oder blockieren.

Beispiele

Der Kürze halber verzichten diese Beispiele auf die Verwendung von Trusted Types. Ein Codebeispiel für die empfohlene Vorgehensweise finden Sie unter Verwendung von TrustedScript bei eval().

Beispiel 1: Grundlegende Syntax

Das folgende Beispiel zeigt die grundlegende Syntax von setInterval().

const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");

function myCallback(a, b) {
  // Your code here
  // Parameters are purely optional.
  console.log(a);
  console.log(b);
}

Beispiel 2: Wechsel zwischen zwei Farben

Im folgenden Beispiel wird die Funktion flashtext() einmal pro Sekunde aufgerufen, bis die Stopp-Schaltfläche gedrückt wird.

HTML

<div id="my_box">
  <h3>Hello World</h3>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>

CSS

.go {
  color: green;
}
.stop {
  color: red;
}

JavaScript

// variable to store our intervalID
let intervalId;

function changeColor() {
  // check if an interval has already been set up
  intervalId ??= setInterval(flashText, 1000);
}

function flashText() {
  const oElem = document.getElementById("my_box");
  oElem.className = oElem.className === "go" ? "stop" : "go";
}

function stopTextColor() {
  clearInterval(intervalId);
  // release our intervalId from the variable
  intervalId = null;
}

document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("stop").addEventListener("click", stopTextColor);

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill für setInterval in core-js, das die Übergabe von Argumenten an den Callback ermöglicht
• Window.clearInterval()
• WorkerGlobalScope.setInterval()
• Window.setTimeout()
• Window.requestAnimationFrame()