Etwas später tun

Bisher haben deine Skripte zu zwei Zeitpunkten etwas getan: wenn die Seite geladen wird und wenn der Nutzer etwas macht, zum Beispiel klickt, tippt oder ein Formular abschickt. Oft soll aber etwas nach einer Weile passieren: Eine Meldung verschwindet ein paar Sekunden, nachdem sie erschienen ist, ein Angebot taucht auf, eine Erinnerung klingelt. Dafür hat JavaScript die Funktion setTimeout(), einen Timer:

setTimeout(function () {
    console.log("Zwei Sekunden sind vergangen.");
}, 2000);

setTimeout() bekommt zwei Argumente: eine Funktion und die Zeit, die gewartet wird, bevor die Funktion läuft, in Millisekunden (Tausendstelsekunden). 1000 Millisekunden sind eine Sekunde, also sind 2000 zwei Sekunden. Achte auf das Ende: } schließt die Funktion, dann folgen ein Komma und die Zahl, und ) schließt die Klammern von setTimeout(.

Es ist wie bei addEventListener(): Das Skript übergibt die Funktion nur, und der Browser ruft sie später auf, diesmal, wenn die Zeit abgelaufen ist, und nur ein einziges Mal.

Du kannst einen Timer setzen, wenn die Seite geladen wird, oder in einem Handler. Dieser leert zwei Sekunden nach einem Klick eine Meldung:

speichernButton.addEventListener("click", function () {
    meldung.textContent = "Gespeichert!";
    setTimeout(function () {
        meldung.textContent = "";
    }, 2000);
});

Die Funktion kann auch eine sein, die du vorher definiert hast und die du mit ihrem Namen übergibst:

function versteckeMeldung() {
    meldung.textContent = "";
}

setTimeout(versteckeMeldung, 2000);

Typische Fehler:

• setTimeout(versteckeMeldung(), 2000): Mit den Klammern läuft versteckeMeldung() sofort, und setTimeout() bekommt das, was die Funktion zurückgegeben hat, statt der Funktion selbst. Wie bei addEventListener() übergibst du die Funktion ohne ().
• setTimeout(versteckeMeldung, 2): Die Zeit ist in Millisekunden angegeben, nicht in Sekunden, also wartet der Timer zwei Tausendstelsekunden, und die Meldung verschwindet, bevor sie jemand lesen kann.

Die Seite in dieser Übung hat in ihrem CSS die Klasse versteckt mit der Regel display: none;, die ein Element versteckt. Entferne die Klasse, und das Element wird angezeigt.