Unterschied zwischen setTimeout() und setInterval()

3 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.

neuen Kommentar erstellen

Php-Coder's Gravatar
Sieht sehr gut aus ;).


10 von 10 ;).
Php-Coder, am 14. November 2013 um 20:10 Uhr
ALfred's Gravatar
Ich bekomme das auch nach stunden einfach nicht hin.
Die Datei "daten.txt wird wie gewünscht in dem voreingestellten Intervall refresht. Funktioniert super.
Aber bei mouseover soll der Refresh stoppen, damit man den Chatverlauf scroööen und lesen kann.
Ich hab alles versucht, der Refresh stopt einfach bei Mouseover nicht.
Hier mal der Code.

<script type="text/javascript">
$(document).ready(function() {   
$("#refresh").load("daten.txt");
var newrefreshId = setInterval(function() {
$("#refresh").load('daten.txt?randval='+ Math.random());
}, 1000);

$("#refresh").mouseover(function() {
      window.clearInterval("#refresh");
      });
});
</script>
Wie bereits geschrieben, der Refresh klappt wirklich super, nur der Stop bei mouseover leider nicht.
ALfred, am 28. Juni 2017 um 12:23 Uhr
Mischa's Gravatar
Hi Alfred
clearInterval muss meines Erachtens auf newrefreshId angewendet werden. Auf diese Variable definierst du ja auch das Timeout. Folgendes müsste also funktionieren:
window.clearInterval(newrefreshId);

Allenfalls muss aber die Variable newrefreshId global definiert werden, damit sie auch wieder richtig referenziert werden kann.
Mischa, am 29. Juni 2017 um 06:30 Uhr
Bitte lassen Sie dieses Feld leer
Kommentar hinzufügen


Bitte lassen Sie dieses Feld leer
Beitrag als E-Mail verschicken
E-Mail via Webmail versenden

Schön, dass Ihnen unser Beitrag gefallen hat. Benutzen Sie folgende Social Networking Dienste, um den Beitrag abzulegen und zu verteilen. Selbstverstädlich können Sie ein direktes Lesezeichen auf diesen Artikel setzen.