Až za chvíli

Vaše skripty zatím dělaly věci ve dvou chvílích: když se stránka načte a když uživatel něco udělá, třeba klikne nebo píše. Často se ale má něco stát až za chvíli: zpráva po pár sekundách zmizí, objeví se nabídka, zazvoní připomínka. K tomu má JavaScript funkci setTimeout(), která nastaví časovač:

setTimeout(function () {
    console.log("Uplynuly dvě sekundy.");
}, 2000);

setTimeout() dostane dva argumenty: funkci a dobu, po kterou má čekat, než funkci spustí, v milisekundách (tisícinách sekundy). 1000 milisekund je jedna sekunda, takže 2000 jsou dvě sekundy. Všimněte si konce: } uzavírá funkci, pak následuje čárka a číslo a ) uzavírá závorky setTimeout(.

Je to podobné jako u addEventListener(): skript funkci jen předá a prohlížeč ji zavolá později, tentokrát až uplyne nastavená doba, a jen jednou.

Časovač můžete nastavit při načtení stránky i v obsluze události. Tenhle vyprázdní zprávu dvě sekundy po kliknutí:

tlacitkoUlozit.addEventListener("click", function () {
    zprava.textContent = "Uloženo!";
    setTimeout(function () {
        zprava.textContent = "";
    }, 2000);
});

Funkce může být i taková, kterou jste definovali předem; předáte ji jejím názvem:

function skrytZpravu() {
    zprava.textContent = "";
}

setTimeout(skrytZpravu, 2000);

Časté chyby:

• setTimeout(skrytZpravu(), 2000): se závorkami se skrytZpravu() spustí hned a setTimeout() dostane místo funkce to, co vrátila. Stejně jako u addEventListener() předávejte funkci bez ().
• setTimeout(skrytZpravu, 2): doba je v milisekundách, ne v sekundách, takže časovač čeká dvě tisíciny sekundy a zpráva zmizí dřív, než ji kdokoli stihne přečíst.

Stránka v tomto cvičení má v CSS třídu skryty s pravidlem display: none;, které prvek skryje. Když třídu odeberete, prvek se ukáže.