setInterval() - повторяющийся запуск функции в JavaScript

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

Главная идея простая: вы передаёте функцию и задержку, а JavaScript начинает вызывать эту функцию снова и снова, пока интервал не будет остановлен.

Синтаксис

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

setInterval(callback, delay, arg1, arg2, ...)

Где:

• callback - функция, которую нужно выполнять повторно
• delay - интервал в миллисекундах между запусками
• arg1, arg2, ... - дополнительные аргументы, которые будут переданы в callback

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

setInterval(() => {
  console.log("Тик");
}, 1000);

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

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

Этот идентификатор нужен, чтобы потом остановить повторяющиеся вызовы через clearInterval().

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

console.log(intervalId);

В браузере это обычно числовой идентификатор. В Node.js это объект таймера. В обоих случаях результат можно передать в clearInterval().

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

const intervalId = setInterval(() => {
  console.log("Прошла ещё 1 секунда");
}, 1000);

Такой код будет выводить сообщение снова и снова, пока интервал не будет остановлен.

setInterval() выполняет функцию повторно

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

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() повторения прекращаются.

Задержка указывается в миллисекундах

Это важно не перепутать.

setInterval(() => {
  console.log("Каждые 500 мс");
}, 500);

Здесь 500 означает полсекунды.

0 не означает мгновенное выполнение

Это важный нюанс, такой же как у setTimeout().

console.log("start");

const intervalId = setInterval(() => {
  console.log("interval");
  clearInterval(intervalId);
}, 0);

console.log("end");

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

start
end
interval

Даже при 0 колбэк не выполняется прямо в ту же строку.

Интервал срабатывает не раньше указанной задержки

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

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

const start = Date.now();

const intervalId = setInterval(() => {
  console.log(Date.now() - start >= 20); // true
  clearInterval(intervalId);
}, 20);

Поэтому интервалы не стоит воспринимать как абсолютно точный метроном.

Дополнительные аргументы можно передавать прямо в setInterval()

Это удобный, но не всегда известный нюанс.

const intervalId = setInterval((a, b) => {
  console.log(a + b); // 5
  clearInterval(intervalId);
}, 1000, 2, 3);

Числа 2 и 3 будут переданы в колбэк при его вызове.

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

Это одна из самых важных практических частей работы с setInterval().

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

clearInterval(intervalId);

Если остановить интервал, новые вызовы больше не будут происходить.

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

Это очень важный момент.

setInterval() только планирует повторяющийся запуск функции. Остальной код продолжает выполняться сразу.

console.log("A");

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

console.log("C");

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

setInterval() работает, пока вы его не остановите

Это ключевое отличие от setTimeout().

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

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

• вы не вызовете clearInterval()
• страница не закроется
• выполнение программы не завершится

setInterval() не ждёт завершения асинхронной работы внутри колбэка

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

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

let count = 0;

const intervalId = setInterval(async () => {
  count += 1;
  const current = count;

  console.log("start", current);

  await new Promise((resolve) => setTimeout(resolve, 300));

  console.log("end", current);

  if (current === 3) {
    clearInterval(intervalId);
  }
}, 100);

Здесь новые вызовы могут начинаться до завершения старых. Это особенно важно при запросах к API, отправке событий и другой асинхронной работе.

В таких ситуациях иногда удобнее использовать не setInterval(), а рекурсивный setTimeout(), чтобы запускать следующий шаг только после завершения предыдущего.

Чем setInterval() отличается от setTimeout()

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

• setTimeout() запускает функцию один раз
• setInterval() запускает функцию повторно через промежутки времени

Пример:

setTimeout(() => {
  console.log("Один раз");
}, 1000);

const intervalId = setInterval(() => {
  console.log("Много раз");
  clearInterval(intervalId);
}, 1000);

Если нужен единичный отложенный запуск, подходит setTimeout(). Если нужна повторяемость, подходит setInterval().

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

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

• нужно обновлять счётчик или таймер
• нужно показывать часы
• нужно периодически проверять состояние
• нужно повторять действие через равные интервалы
• нужно обновлять данные на экране через некоторое время

Пример:

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

Такой код удобно использовать для часов или простых повторяющихся обновлений.

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

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

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

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

Вызывать функцию сразу вместо передачи функции

setInterval(console.log("Привет"), 1000);

Здесь console.log("Привет") выполнится сразу, а в setInterval() попадёт уже результат вызова, а не сама функция.

Правильно так:

setInterval(() => {
  console.log("Привет");
}, 1000);

Думать, что 0 означает мгновенный запуск

console.log("start");

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

console.log("end");

Сначала всё равно выполнится синхронный код, и только потом сработает интервал.

Путать setInterval() и setTimeout()

setInterval(() => {
  console.log("Повторяется");
}, 1000);

Это не одноразовый запуск. Если нужен только один вызов, нужен setTimeout().

Использовать setInterval() для асинхронной работы без контроля

setInterval(async () => {
  await fetch("/api/data");
}, 1000);

Если запросы работают дольше интервала, новые вызовы могут начать наслаиваться. Для таких случаев часто лучше аккуратнее контролировать следующий запуск вручную.

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

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

Коротко

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