clearTimeout() - отмена таймера в JavaScript

clearTimeout() нужен, чтобы отменить таймер, созданный через setTimeout(). Если таймер ещё не успел сработать, его колбэк не выполнится.

Это базовый инструмент для работы с отменяемыми задержками: отложенных подсказок, автосохранения, debounce-подобного поведения и любых сценариев, где запланированное действие может стать уже неактуальным.

Синтаксис

Базовая запись выглядит так:

clearTimeout(timeoutId)

Где:

• timeoutId - идентификатор таймера, который ранее вернул setTimeout()

Обычно clearTimeout() используют так:

const timerId = setTimeout(() => {
  console.log("Не должно выполниться");
}, 1000);

clearTimeout(timerId);

Что принимает clearTimeout()

clearTimeout() принимает идентификатор таймера.

Этот идентификатор возвращает setTimeout():

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

clearTimeout(timerId);

В браузере это обычно число. В Node.js это объект таймера. Но принцип один и тот же: clearTimeout() получает именно то, что вернул setTimeout().

Что возвращает clearTimeout()

clearTimeout() ничего полезного не возвращает.

Главный эффект этого метода не в возвращаемом значении, а в том, что он отменяет запланированный вызов.

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

const result = clearTimeout(timerId);

console.log(result); // undefined

Простой пример

const timerId = setTimeout(() => {
  console.log("Сообщение не появится");
}, 1000);

clearTimeout(timerId);

Здесь таймер был поставлен, но затем сразу отменён.

clearTimeout() отменяет только ещё не сработавший таймер

Это главное правило метода.

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

clearTimeout(timerId);

Если таймер отменён до момента срабатывания, колбэк не запустится.

Если таймер уже выполнился, clearTimeout() ничего не изменит

Это полезный практический нюанс.

const timerId = setTimeout(() => {
  console.log("timeout");
}, 10);

setTimeout(() => {
  clearTimeout(timerId);
  console.log("cleared after fire");
}, 30);

Результат будет таким:

timeout
cleared after fire

То есть после фактического выполнения таймера отменять уже нечего.

Если передать несуществующий идентификатор, ошибки обычно не будет

Это ещё один полезный нюанс.

clearTimeout(123456);
console.log("ok");

Такой вызов обычно просто ничего не делает.

Это удобно, потому что код не обязан каждый раз отдельно проверять, существует ли таймер на самом деле.

clearTimeout() часто используют вместе с повторной установкой таймера

Это один из самых практических сценариев.

let timerId;

function scheduleSave() {
  clearTimeout(timerId);

  timerId = setTimeout(() => {
    console.log("Сохраняем изменения");
  }, 1000);
}

Такой подход позволяет не запускать много таймеров подряд, а каждый раз оставлять только последний актуальный.

clearTimeout() не ставит код на паузу

Это важно понимать правильно.

clearTimeout() ничего не ждёт и не блокирует. Он просто снимает уже запланированный таймер.

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

clearTimeout(timerId);

console.log("Код продолжает выполняться сразу");

Метод работает мгновенно и не останавливает остальную программу.

Чем clearTimeout() отличается от clearInterval()

Это сравнение полезно запомнить.

• clearTimeout() отменяет таймер от setTimeout()
• clearInterval() останавливает повторяющийся интервал от setInterval()

Пример:

const timeoutId = setTimeout(() => {
  console.log("timeout");
}, 1000);

clearTimeout(timeoutId);

Если нужно отменить именно разовый отложенный запуск, используют clearTimeout().

Когда это полезно

clearTimeout() особенно удобен, когда:

• нужно отменить отложенное действие
• пользователь продолжил ввод, и старый таймер уже неактуален
• нужно сбросить старую задержку перед установкой новой
• нужно не допустить лишнего выполнения кода позже

Пример:

let timerId;

input.addEventListener("input", () => {
  clearTimeout(timerId);

  timerId = setTimeout(() => {
    console.log("Проверяем введённое значение");
  }, 500);
});

Такой подход особенно полезен при отложенной проверке формы, поиске по мере ввода и автосохранении.

Частые ошибки

Не сохранять идентификатор таймера

setTimeout(() => {
  console.log("run");
}, 1000);

Если позже понадобится отмена, без сохранённого идентификатора это сделать уже неудобно.

Лучше так:

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

clearTimeout(timerId);

Думать, что clearTimeout() отменяет уже выполненный колбэк

const timerId = setTimeout(() => {
  console.log("timeout");
}, 10);

setTimeout(() => {
  clearTimeout(timerId);
}, 30);

Если таймер уже успел отработать, отменять уже нечего.

Путать clearTimeout() и clearInterval()

const timerId = setTimeout(() => {
  console.log("run");
}, 1000);

clearTimeout(timerId);

clearTimeout() работает с таймерами от setTimeout(), а не с повторяющимися интервалами как основным сценарием.

Думать, что clearTimeout() что-то возвращает

const result = clearTimeout(timerId);

Обычно проверять result бессмысленно. Важен сам факт отмены, а не возвращаемое значение.

Забывать сбрасывать старый таймер перед новым

let timerId;

function runLater() {
  timerId = setTimeout(() => {
    console.log("run");
  }, 1000);
}

Если вызывать такую функцию много раз, можно случайно накопить несколько таймеров. Часто перед новым setTimeout() сначала вызывают clearTimeout(timerId).

Быстрая памятка

• clearTimeout() отменяет таймер от setTimeout()
• метод принимает идентификатор таймера
• идентификатор возвращает setTimeout()
• если таймер ещё не сработал, колбэк не выполнится
• если таймер уже выполнился, clearTimeout() ничего не изменит
• если передать несуществующий идентификатор, ошибки обычно не будет
• метод ничего полезного не возвращает
• clearTimeout() часто используют перед установкой нового таймера

Коротко

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