Unterschied zwischen setTimeout() und setInterval()

1 Kommentare
Thierry Nischelwitzer, Webapplikations-Programmierer (bis 2012)

Immer mal wieder braucht man bei Javascript diese Funktionen um etwas Zeitversetzt auszuführen. Aber welche Funktion sollte man verwenden? Hier mal setTimeout() und setInterval() im Vergleich.

Vielfach will man einfach eine Javascript-Funktion mit einer Verzögerung von, sagen wir mal 5 Sekunden, starten. Manchmal sieht man folgenden Code.

1<script type="text/javascript">
2 function foo (){
3 alert("Hallo Welt");
4
5 // Intervall wieder eliminieren
6 window.clearInterval(fooInterval);
7 }
8
9 // Intervall erstellen und einer Variable zuweisen
10 var fooInterval = window.setInterval("foo()", 5000);
11</script>

Funktioniert, ist aber nicht ganz ideal. Eigentlich gibt es genau für das Szenario eine andere Funktion, setTimeout() nennt man diese. setInterval() sagt ja schon, dass es in einem Intervall ausgeführt wird. Der gleiche Programmablauf kriegt man also folgendermassen hin.

1<script type="text/javascript">
2 function foo (){
3 alert("Hallo Welt");
4 }
5
6 // Intervall erstellen, die Variable wird hier nicht gebraucht
7 window.setTimeout("foo()", 5000);
8</script>

Sieht doch schon viel schlanker aus. Wenn wir schon dabei sind, der aufzurufenden Funktion können auch Variablen übergeben werden. Ein kleines Beispiel dazu hier.

1<script type="text/javascript">
2 function foo (text){
3 alert("Hallo Welt (" + text + ")");
4 }
5
6 // Intervall erstellen, die Variable wird hier nicht gebraucht
7 window.setTimeout("foo('bar')", 5000);
8</script>

Und das ganze funktioniert ebenfalls bei der Funktion setTimeout(). Hier sieht man, dass der Zähler i immer eins inkrementiert wird und so immer eins mehr ausgibt.

1<script type="text/javascript">
2 // Z&auml;hler initialisieren
3 var i = 1;
4
5 function foo (text){
6 alert("Hallo Welt (" + text + ")");
7    
8// i eins inkrementieren
9i++;
10 }
11
12 // Intervall erstellen und einer Variable zuweisen
13 var fooInterval = window.setInterval("foo(i)", 5000);
14</script>

Kurz und bündig heisst das, setInterval() ist für wiederkehrende Funktionsaufrufe und setTimeout() für das einmalige, verzögerte aufrufen einer Funktion.