Отмена таймера

Во многих почтовых приложениях письмо можно вернуть: после нажатия «Отправить» приложение несколько секунд ждёт, и если за это время нажать «Отменить», письмо не уйдёт. Это таймер, который можно отменить.

setTimeout() возвращает число — идентификатор таймера. Сохраните его в переменной, и вы сможете отменить таймер с помощью clearTimeout(): тогда его функция так и не запустится.

let sendTimer;

sendButton.addEventListener("click", function () {
    statusText.textContent = "Отправка через 3 секунды…";
    sendTimer = setTimeout(function () {
        statusText.textContent = "Отправлено.";
    }, 3000);
});

undoButton.addEventListener("click", function () {
    clearTimeout(sendTimer);
    statusText.textContent = "Не отправлено.";
});

Переменная sendTimer создаётся снаружи обоих обработчиков, чтобы пользоваться ею могли оба: один сохраняет в ней таймер, другой его отменяет. Это то самое правило, которое вы знаете по счётчику щелчков. Она создаётся через let, потому что каждый щелчок по «Отправить» сохраняет в ней новый таймер. Сначала у неё нет значения, поэтому в ней лежит undefined, а clearTimeout(undefined) просто ничего не делает. Щелчок по «Отменить» до «Отправить» ошибки не вызывает.

Типичные ошибки:

• const sendTimer = setTimeout(...) внутри обработчика «Отправить»: тогда переменная существует только в этом обработчике, и обработчик «Отменить» завершается ошибкой ReferenceError: sendTimer is not defined.
• clearTimeout() отменяет только тот таймер, идентификатор которого получает. Если «Отправить» нажать дважды, работают два таймера, а в переменной лежит только второй.