Opakování pomocí setInterval

setTimeout() spustí funkci jednou. setInterval() ji spouští znovu a znovu, vždy po zadaném počtu milisekund, dokud takový interval nezastavíte. I setInterval() vrací id a interval zastaví clearInterval(). Tady je odpočet před startem rakety:

const odpocet = document.querySelector("#odpocet");

let sekundy = 3;
odpocet.textContent = sekundy;

const casovac = setInterval(function () {
    sekundy--;
    if (sekundy === 0) {
        clearInterval(casovac);
        odpocet.textContent = "Start!";
    } else {
        odpocet.textContent = sekundy;
    }
}, 1000);

Stránka ukáže 3, o sekundu později 2, pak 1 a nakonec Start! V tu chvíli clearInterval(casovac) interval zastaví a jeho funkce už se nespustí.

Všimněte si, že:

• Funkce se poprvé spustí až po první sekundě, ne hned. Proto skript trojku ukáže sám, ještě než interval spustí.
• Proměnná sekundy je mimo funkci, aby si číslo pamatovala od jednoho spuštění funkce k dalšímu, stejně jako počítadlo kliknutí. S let sekundy = 3; uvnitř funkce by každé spuštění začalo zase od 3 a stránka by navždy ukazovala 2.
• Interval se může zastavit sám: jeho funkce smí použít casovac, protože se spustí až později, kdy už je v něm id uložené.

Časté chyby:

• Zapomenutý clearInterval(): odpočet pokračuje k 0, -1, -2… tak dlouho, dokud je stránka otevřená.
• clearInterval(sekundy): potřebuje id intervalu, ne číslo, které odpočítáváte.
• Interval spuštěný dvakrát, třeba dvěma kliknutími na tlačítko Start: pak běží dva intervaly najednou a odpočet jde dvakrát rychleji. Stejně jako u rakety v minulém cvičení nejdřív zastavte předchozí interval pomocí clearInterval(casovac).