Как в JavaScript отменить setInterval?

Отмена setInterval в JavaScript

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

Базовый способ: clearInterval

// Создаём интервал
const intervalId = setInterval(() => {
  console.log('Прошла 1 секунда');
}, 1000);

// Останавливаем интервал
clearInterval(intervalId);

Функция setInterval возвращает числовой идентификатор, который нужно сохранить. Затем передаём этот идентификатор в clearInterval, чтобы остановить повторения.

Практические примеры

Пример 1: Отсчет времени с кнопкой остановки

let counter = 0;
let intervalId;

function startTimer() {
  intervalId = setInterval(() => {
    counter++;
    console.log(`Прошло ${counter} секунд`);
  }, 1000);
}

function stopTimer() {
  clearInterval(intervalId);
  console.log('Таймер остановлен');
  counter = 0;
}

// Использование
startTimer();
// После 5 секунд
setTimeout(() => stopTimer(), 5000);

Пример 2: Анимация с интервалом

const box = document.getElementById('box');
let position = 0;
let intervalId;

function startAnimation() {
  intervalId = setInterval(() => {
    position += 5;
    box.style.left = position + 'px';
    
    // Останавливаем когда дошли до конца
    if (position >= 400) {
      clearInterval(intervalId);
    }
  }, 50);
}

function stopAnimation() {
  clearInterval(intervalId);
  position = 0;
}

Отмена нескольких интервалов

const intervals = [];

// Создаём несколько интервалов
for (let i = 1; i <= 3; i++) {
  const id = setInterval(() => {
    console.log(`Интервал ${i}`);
  }, 1000);
  intervals.push(id);
}

// Останавливаем все интервалы
function stopAllIntervals() {
  intervals.forEach(id => clearInterval(id));
  intervals = [];
}

stopAllIntervals();

Интервал с условием остановки

let attempts = 0;
const maxAttempts = 5;

const intervalId = setInterval(() => {
  attempts++;
  console.log(`Попытка ${attempts}`);
  
  if (attempts >= maxAttempts) {
    clearInterval(intervalId);
    console.log('Достигнут лимит попыток');
  }
}, 1000);

Замена clearInterval на условие

// Можно также использовать флаг
let isRunning = true;

const intervalId = setInterval(() => {
  if (!isRunning) {
    clearInterval(intervalId);
    return;
  }
  console.log('Интервал работает');
}, 1000);

// Останавливаем через флаг
function stop() {
  isRunning = false;
}

Интеграция с React

import { useEffect, useRef } from 'react';

function Timer() {
  const intervalRef = useRef(null);
  const [seconds, setSeconds] = React.useState(0);

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };

  // Очистка при размонтировании компонента
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  return (
    <div>
      <p>Секунды: {seconds}</p>
      <button onClick={startTimer}>Начать</button>
      <button onClick={stopTimer}>Остановить</button>
    </div>
  );
}

Класс для управления интервалами

class IntervalManager {
  constructor() {
    this.intervals = new Map();
  }

  // Создать интервал с именем
  create(name, callback, delay) {
    const id = setInterval(callback, delay);
    this.intervals.set(name, id);
    return id;
  }

  // Остановить конкретный интервал
  stop(name) {
    const id = this.intervals.get(name);
    if (id !== undefined) {
      clearInterval(id);
      this.intervals.delete(name);
    }
  }

  // Остановить все интервалы
  stopAll() {
    this.intervals.forEach(id => clearInterval(id));
    this.intervals.clear();
  }

  // Проверить, запущен ли интервал
  isRunning(name) {
    return this.intervals.has(name);
  }
}

// Использование
const manager = new IntervalManager();

manager.create('timer1', () => console.log('Таймер 1'), 1000);
manager.create('timer2', () => console.log('Таймер 2'), 2000);

// Останавливаем конкретный
manager.stop('timer1');

// Останавливаем все
manager.stopAll();

Различие между setInterval и setTimeout

// setInterval — повторяется каждые 1000мс
const interval = setInterval(() => {
  console.log('Повторяется');
}, 1000);

// setTimeout — выполняется один раз через 1000мс
const timeout = setTimeout(() => {
  console.log('Один раз');
}, 1000);

// Отмена setInterval
clearInterval(interval);

// Отмена setTimeout
clearTimeout(timeout);

Важные замечания

• Сохраняй ID: всегда сохраняй результат setInterval в переменную
• Очищай при размонтировании: в React используй useEffect для cleanup
• Проверяй существование: перед clearInterval проверь, что ID существует
• Один вызов clearInterval: можно вызвать clearInterval несколько раз, но второй и далее будут игнорироваться
• ID разные для разных интервалов: каждый вызов setInterval возвращает уникальный ID

Частая ошибка

// ❌ Неправильно — ID теряется
setInterval(() => {
  console.log('Работает');
}, 1000);
// Нельзя остановить, т.к. нет доступа к ID

// ✅ Правильно — сохраняем ID
const id = setInterval(() => {
  console.log('Работает');
}, 1000);
clearInterval(id); // Теперь можно остановить

Правильное управление setInterval и clearInterval критично для предотвращения утечек памяти и контроля асинхронного кода.