Einen Timer abbrechen

Viele E-Mail-Programme lassen dich eine Nachricht zurückholen: Nach dem Klick auf Senden warten sie ein paar Sekunden, und wenn du in der Zwischenzeit auf Rückgängig klickst, wird die Nachricht nie verschickt. Das ist ein Timer, den man abbrechen kann.

setTimeout() gibt eine Zahl zurück, die ID des Timers. Speichere sie in einer Variable, und du kannst den Timer mit clearTimeout() abbrechen: Seine Funktion läuft dann nie.

let sendeTimer;

sendenButton.addEventListener("click", function () {
    statusText.textContent = "Senden in 3 Sekunden…";
    sendeTimer = setTimeout(function () {
        statusText.textContent = "Gesendet.";
    }, 3000);
});

rueckgaengigButton.addEventListener("click", function () {
    clearTimeout(sendeTimer);
    statusText.textContent = "Nicht gesendet.";
});

Die Variable sendeTimer wird außerhalb beider Handler angelegt, damit beide sie benutzen können: Der eine speichert den Timer darin, der andere bricht ihn ab. Das ist die Regel, die du vom Klickzähler kennst. Sie wird mit let angelegt, weil jeder Klick auf Senden einen neuen Timer darin speichert. Am Anfang hat sie keinen Wert, also enthält sie undefined, und clearTimeout(undefined) tut einfach nichts. Ein Klick auf Rückgängig vor Senden verursacht keinen Fehler.

Typische Fehler:

• const sendeTimer = setTimeout(...) im Handler von Senden: Die Variable existiert dann nur in diesem Handler, und der Handler von Rückgängig endet mit ReferenceError: sendeTimer is not defined.
• clearTimeout() bricht nur den Timer ab, dessen ID es bekommt. Wenn zweimal auf Senden geklickt wird, laufen zwei Timer, und die Variable enthält nur den zweiten.