clearInterval() - остановка интервала в JavaScript

clearInterval() нужен, чтобы остановить повторяющийся таймер, созданный через setInterval(). После этого новые тики интервала больше не запускаются.

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

Синтаксис

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

clearInterval(intervalId)

Где:

intervalId - идентификатор интервала, который раньше вернул setInterval()

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

const intervalId = setInterval(() => {
  console.log("Повтор");
}, 1000);

clearInterval(intervalId);

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

clearInterval() принимает идентификатор интервала.

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

const intervalId = setInterval(() => {
  console.log("tick");
}, 1000);

clearInterval(intervalId);

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

Что возвращает `clearInterval()`

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

Главный результат здесь не в возвращаемом значении, а в самом эффекте остановки интервала.

const intervalId = setInterval(() => {
  console.log("tick");
}, 1000);

const result = clearInterval(intervalId);

console.log(result); // undefined

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

const intervalId = setInterval(() => {
  console.log("Секунда прошла");
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);
  console.log("Интервал остановлен");
}, 3500);

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

`clearInterval()` останавливает будущие повторы

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

let count = 0;

const intervalId = setInterval(() => {
  count += 1;
  console.log("tick", count);

  if (count === 3) {
    clearInterval(intervalId);
  }
}, 1000);

Результат будет примерно таким:

tick 1
tick 2
tick 3

После вызова clearInterval(intervalId) новые тики больше не начнутся.

Если остановить интервал до первого тика, колбэк не выполнится

Это полезно понимать отдельно.

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

clearInterval(intervalId);

Интервал был создан, но отменён раньше первого запуска, поэтому колбэк вообще не выполнится.

`clearInterval()` не прерывает уже начавшийся запуск колбэка

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

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

let count = 0;

const intervalId = setInterval(() => {
  count += 1;
  console.log("start", count);

  clearInterval(intervalId);

  console.log("finish", count);
}, 1000);

Здесь текущий колбэк завершится полностью, но после него новых запусков уже не будет.

Если интервал уже остановлен, `clearInterval()` ничего не изменит

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

const intervalId = setInterval(() => {
  console.log("tick");
}, 1000);

clearInterval(intervalId);
clearInterval(intervalId);

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

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

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

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

Обычно такой вызов просто ничего не меняет.

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

`clearInterval()` часто вызывают внутри самого интервала

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

let seconds = 5;

const intervalId = setInterval(() => {
  console.log(seconds);
  seconds -= 1;

  if (seconds < 0) {
    clearInterval(intervalId);
    console.log("Отсчёт завершён");
  }
}, 1000);

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

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

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

clearInterval() ничего не ждёт и не блокирует. Он просто останавливает уже существующий повторяющийся таймер.

const intervalId = setInterval(() => {
  console.log("tick");
}, 1000);

clearInterval(intervalId);

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

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

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

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

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

Пример:

const intervalId = setInterval(() => {
  console.log("repeat");
}, 1000);

clearInterval(intervalId);

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

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

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

нужно остановить счётчик или таймер
нужно прекратить обновление интерфейса через равные промежутки времени
нужно завершить анимацию или опрос состояния
интервал должен работать только до выполнения условия
важно не оставлять бесконечно работающий таймер

Пример:

const intervalId = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

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

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

Не сохранять идентификатор интервала

setInterval(() => {
  console.log("tick");
}, 1000);

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

Лучше так:

const intervalId = setInterval(() => {
  console.log("tick");
}, 1000);

clearInterval(intervalId);

Думать, что `clearInterval()` прерывает уже выполняющийся код

const intervalId = setInterval(() => {
  console.log("start");
  clearInterval(intervalId);
  console.log("finish");
}, 1000);

Текущий запуск дойдёт до конца. Метод отменяет только следующие повторения.

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

const intervalId = setInterval(() => {
  console.log("repeat");
}, 1000);

clearInterval(intervalId);

clearInterval() используют для интервалов от setInterval(), а clearTimeout() - для одиночных таймеров от setTimeout().

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

const result = clearInterval(intervalId);

Обычно проверять result бессмысленно. Здесь важен сам факт остановки интервала.

Забывать останавливать интервал

setInterval(() => {
  console.log("repeat");
}, 1000);

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

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

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

Коротко

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

clearInterval() - остановка интервала в JavaScript

Синтаксис

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

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

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

clearInterval() останавливает будущие повторы