Zrušení časovače

Řada e-mailových aplikací umí zprávu vzít zpět: po kliknutí na Odeslat pár sekund počká, a když mezitím kliknete na Zpět, zpráva se vůbec neodešle. Je to časovač, který jde zrušit.

setTimeout() vrací číslo, identifikátor (id) časovače. Uložte si ho do proměnné a pak můžete časovač zrušit funkcí clearTimeout(): jeho funkce se už nespustí.

let casovacOdeslani;

tlacitkoOdeslat.addEventListener("click", function () {
    stavText.textContent = "Odeslání za 3 sekundy…";
    casovacOdeslani = setTimeout(function () {
        stavText.textContent = "Odesláno.";
    }, 3000);
});

tlacitkoZpet.addEventListener("click", function () {
    clearTimeout(casovacOdeslani);
    stavText.textContent = "Neodesláno.";
});

Proměnná casovacOdeslani je vytvořená mimo obě obsluhy, aby ji mohly používat obě: jedna do ní časovač uloží, druhá ho zruší. To je pravidlo, které znáte z počítadla kliknutí. Vytváří se pomocí let, protože každé kliknutí na Odeslat do ní uloží nový časovač. Na začátku nemá žádnou hodnotu, je v ní tedy undefined, a clearTimeout(undefined) prostě nic neudělá. Kliknutí na Zpět dřív než na Odeslat proto žádnou chybu nezpůsobí.

Časté chyby:

• const casovacOdeslani = setTimeout(...) uvnitř obsluhy tlačítka Odeslat: proměnná pak existuje jen v této obsluze a obsluha tlačítka Zpět skončí chybou ReferenceError: casovacOdeslani is not defined.
• clearTimeout() zruší jen ten časovač, jehož id dostane. Když se na Odeslat klikne dvakrát, běží dva časovače a v proměnné je uložený jen ten druhý.