Zeitschleife mit setInterval()

siehe w3schools

Javascript

<script>

    let i;

    function zahlen() {
        document.meinformular.meintextfeld.value = i;
        i++;
    }
    setInterval(zahlen, 1000);
    </script>
HTML
<form name="meinformular" id="meinformular">
<input name="meintextfeld" type="text" id="meintextfeld" class="textfeld">
</form>

Mittels setInterval() kann man einfach eine Zeitschleife programmieren. Der erste Parameter benötigt einen Verweis auf eine Funktion, der zweite Parameter die Dauer des Zeitintervals in Millisekunden

Ihr solltet jetzt in der Lage sein, eine Anzeige in Minuten und Sekunden ohne Hilfe selber zu erzeugen. Ihr braucht dazu 2 weitere Variablen (Minuten, Sekunden) und eine if-Struktur. Wenn die Sekunden höher als 60 sind, werden sie auf 0 gesetzt und die Minuten werden um 1 erhöht.

Wenn man eine Uhr mit Zeigern programmieren will, kann man Bilder für die Zeiger verwenden und diese mit CSS drehen.

Zeitanzeige starten

clearInterval

Wenn man setInterval einer Variable zuweist, kann mittels clearInterval die Schleife stoppen:

var start = setInterval(move,1000);
clearInterval(start);

setInterval mit Referenz auf this

Beispiel

Will man innerhalb eines Klasse setInterval oder auch setTimeout nutzen, hat man das Problem, dass man nicht auf das this der Klasse zugreifen kann.

Dieses Thema wird auch auf der Seite: iTechNote Javascript Refering this ausführlich beschrieben.

Mittels einer Big Arrow Funktion kann man das Problem lösen, da die kein eigenes this besitzt.

'use strict';
class Car {
    constructor(xPos){
    this.xPos = xPos;
    }
    move(){this.xPos++; console.log(this.xPos);};
    start;
    go(){ this.start = setInterval( () => this.move(), 1000); };
    stop(){clearInterval(this.start)} ;
 }
var ford = new Car(1);
ford.go();
setTimeout(function(){return ford.stop();}, 5000);
setTimeout(function(){return ford.go();}, 7000);

Mit weiteren Beispiele wird daraus ein animiertes Auto erstellt, welches quer über das Fenster fährt.

Car1, Car2, Car3

Ich habe noch 2 weitere Beispiele erstell, bei denen die Zeitschleife mit requestAnimationFrame erzeugt wird.

Car4, Car5

Siehe auch die Beispiele unter dem Thema HTML Element erweitern

 

weiter

Javascript Tipps