Co proběhne dřív

setTimeout() program nepozastaví. Jen nastaví časovač, předá mu funkci a skript hned pokračuje dalším řádkem. Co podle vás vypíše tento program?

console.log("Voda se vaří.");

setTimeout(function () {
    console.log("Čaj je hotový!");
}, 3000);

console.log("Čekáme na čaj…");

Voda se vaří.
Čekáme na čaj…
Čaj je hotový!

Poslední řádek se objeví tři sekundy po prvních dvou. JavaScript provede první console.log(), nastaví časovač a hned provede druhý console.log(). Funkci časovače zavolá prohlížeč až po uplynutí tří sekund. Stejné by to bylo i s 0 milisekundami: funkce časovače se spustí, až když doběhne kód, který právě běží.

Všechno, co se má stát po čekání, proto musí být uvnitř funkce časovače. Řádky pod setTimeout() proběhnou hned:

setTimeout(function () {
    stavText.textContent = "Čaj je hotový!";
}, 3000);
stavText.textContent = "Dobrou chuť!"; // Proběhne hned, ne až za 3 sekundy

Tahle stránka nejdřív ukáže Dobrou chuť! a Čaj je hotový! se objeví až za 3 sekundy.

V tomto cvičení použijete i vlastnost tlačítka disabled (vypnuté). Po tlacitko.disabled = true; tlačítko zešedne a kliknutí na ně nic neudělá; tlacitko.disabled = false; ho zase zapne. Hodí se, když stránka na něco čeká, aby nikdo nespustil totéž dvakrát.