Kapitel 17: Timer (Code zeitverzögert ausführen)

Timer erlauben Ihnen, Code zeitverzögert oder wiederholt auszuführen. In diesem Kapitel lernen Sie setInterval und setTimeout.

17.1 setInterval - Wiederholungs-Timer (Zyklus)

setInterval führt eine Funktion wiederholt in festen Intervallen aus.

Grundlegende Syntax

let intervallId = setInterval(funktion, intervalInMs);

Einfaches Beispiel: Jede Sekunde ausführen

// Jede 1000ms (1 Sekunde) ausführen
let zaehler = 0;
let intervallId = setInterval(function() {
    zaehler++;
    console.log("Durchlauf:", zaehler);
}, 1000);

Praxis-Beispiel: Digital-Uhr

<h1 id="uhr"></h1>

<script>
    function aktualisiereUhr() {
        let jetzt = new Date();
        let zeit = jetzt.toLocaleTimeString("de-DE");
        document.getElementById("uhr").textContent = zeit;
    }

    // Jede Sekunde aktualisieren
    setInterval(aktualisiereUhr, 1000);

    // Sofort einmal ausführen (damit nicht 1 Sek. gewartet werden muss)
    aktualisiereUhr();
</script>

17.2 setTimeout - Verzögerungs-Timer (Einmalig)

setTimeout führt eine Funktion einmalig nach einer Verzögerung aus.

Grundlegende Syntax

let timeoutId = setTimeout(funktion, verzoegerungInMs);

Einfaches Beispiel: 3 Sekunden warten

console.log("Start...");

setTimeout(function() {
    console.log("3 Sekunden vergangen!");
}, 3000);

console.log("Weiter...");

Ausgabe:

Start...
Weiter...
(after 3 seconds) 3 Sekunden vergangen!

Praxis-Beispiel: Begrüßung nach Verzögerung

<h1 id="begruessung"></h1>

<script>
    console.log("Seite lädt...");

    setTimeout(function() {
        document.getElementById("begruessung").textContent = "Willkommen!";
        console.log("Begrüßung angezeigt.");
    }, 2000);  // 2 Sekunden Verzögerung
</script>

17.3 Timer löschen (Interval/Timeout stoppen)

Sie können Timer mit clearInterval() und clearTimeout() stoppen.

clearInterval() - Intervall stoppen

let zaehler = 0;
let intervallId = setInterval(function() {
    zaechter++;
    console.log("Zähler:", zaechter);

    if (zaechter >= 5) {
        clearInterval(intervallId);  // Intervall stoppen
        console.log("Intervall gestoppt.");
    }
}, 1000);

clearTimeout() - Timeout abbrechen

let timeoutId = setTimeout(function() {
    console.log("Dies wird NICHT ausgeführt.");
}, 5000);

// Timeout abbrechen (bevor 5 Sekunden vergehen)
clearTimeout(timeoutId);
console.log("Timeout abgebrochen.");

Praxis-Beispiel: Countdown mit Stop-Button

<h1 id="countdown">10</h1>
<button id="stopBtn">Stop</button>

<script>
    let sekunden = 10;
    let countdownElement = document.getElementById("countdown");
    let stopBtn = document.getElementById("stopBtn");

    let intervallId = setInterval(function() {
        sekunden--;
        countdownElement.textContent = sekunden;

        if (sekunden <= 0) {
            clearInterval(intervallId);
            countdownElement.textContent = "Zeit abgelaufen!";
        }
    }, 1000);

    stopBtn.addEventListener("click", function() {
        clearInterval(intervallId);
        countdownElement.textContent = "Gestoppt!";
    });
</script>

17.4 Praxis: Countdown / Bild-Slider automatisch wechseln

Projekt 1: Countdown-Timer

<div>
    <input type="number" id="minuten" placeholder="Minuten" value="1">
    <button id="startBtn">Start</button>
    <button id="stopBtn">Stop</button>
</div>
<h1 id="anzeige">00:00</h1>

<script>
    let intervallId = null;
    let verbleibendeSekunden = 0;

    document.getElementById("startBtn").addEventListener("click", function() {
        // Bereits laufenden Timer stoppen
        if (intervallId) {
            clearInterval(intervallId);
        }

        // Minuten in Sekunden umrechnen
        let minuten = parseInt(document.getElementById("minuten").value) || 1;
        verbleibendeSekunden = minuten * 60;

        // Anzeige aktualisieren
        aktualisiereAnzeige();

        // Timer starten
        intervallId = setInterval(function() {
            verbleibendeSekunden--;
            aktualisiereAnzeige();

            if (verbleibendeSekunden <= 0) {
                clearInterval(intervallId);
                alert("Zeit abgelaufen!");
            }
        }, 1000);
    });

    document.getElementById("stopBtn").addEventListener("click", function() {
        if (intervallId) {
            clearInterval(intervallId);
            intervallId = null;
        }
    });

    function aktualisiereAnzeige() {
        let minuten = Math.floor(verbleibendeSekunden / 60);
        let sekunden = verbleibendeSekunden % 60;
        let anzeige = `${minuten.toString().padStart(2, '0')}:${sekunden.toString().padStart(2, '0')}`;
        document.getElementById("anzeige").textContent = anzeige;
    }
</script>

Projekt 2: Bild-Slider automatisch wechseln

<img id="slider" src="bild1.jpg" style="width: 500px; height: 300px;">
<div>
    <button id="prevBtn">Zurück</button>
    <button id="nextBtn">Weiter</button>
    <button id="autoBtn">Auto-Play</button>
    <button id="stopAutoBtn">Stop</button>
</div>

<script>
    let bilder = ["bild1.jpg", "bild2.jpg", "bild3.jpg"];
    let aktuellerIndex = 0;
    let autoPlayId = null;

    let slider = document.getElementById("slider");

    // Nächstes Bild
    document.getElementById("nextBtn").addEventListener("click", function() {
        aktuellerIndex = (aktuellerIndex + 1) % bilder.length;
        slider.src = bilder[aktuellerIndex];
    });

    // Vorheriges Bild
    document.getElementById("prevBtn").addEventListener("click", function() {
        aktuellerIndex = (aktuellerIndex - 1 + bilder.length) % bilder.length;
        slider.src = bilder[aktuellerIndex];
    });

    // Auto-Play starten
    document.getElementById("autoBtn").addEventListener("click", function() {
        if (autoPlayId) return;  // Bereits aktiv

        autoPlayId = setInterval(function() {
            aktuellerIndex = (aktuellerIndex + 1) % bilder.length;
            slider.src = bilder[aktuellerIndex];
        }, 3000);  // Alle 3 Sekunden
    });

    // Auto-Play stoppen
    document.getElementById("stopAutoBtn").addEventListener("click", function() {
        if (autoPlayId) {
            clearInterval(autoPlayId);
            autoPlayId = null;
        }
    });
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ setInterval() - Code wiederholt ausführen
• ✅ setTimeout() - Code einmalig nach Verzögerung ausführen
• ✅ clearInterval() - Intervall-Timer stoppen
• ✅ clearTimeout() - Timeout-Timer abbrechen
• ✅ Praxis-Projekte: Countdown-Timer, Bild-Slider mit Auto-Play

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir lokalen Speicher (Local Storage) - Daten im Browser speichern!

---

Übung:

1. Erstellen Sie einen Countdown von 60 Sekunden
2. Erstellen Sie einen Bild-Slider, der automatisch alle 3 Sekunden wechselt
3. Fügen Sie einen Button hinzu, um den Slider zu stoppen
4. Testen Sie alles im Browser