setTimeout и setInterval в JavaScript: таймеры, задержки и правильная очистка

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

Что такое setTimeout

setTimeout запускает функцию один раз после указанной задержки. Задержка задаётся в миллисекундах: 1000 мс = 1 секунда.

setTimeout(function() {
  console.log('Прошла 1 секунда');
}, 1000);

Современный вариант со стрелочной функцией:

setTimeout(() => {
  console.log('Сообщение появилось с задержкой');
}, 1500);

Важно: JavaScript не «останавливается» на время таймера. Он регистрирует отложенную задачу и продолжает выполнять следующий код.

console.log('Первый');

setTimeout(() => {
  console.log('Третий');
}, 1000);

console.log('Второй');

Результат будет: Первый, Второй, затем через секунду Третий.

Как отменить setTimeout

setTimeout возвращает идентификатор таймера. Его можно сохранить и передать в clearTimeout, если выполнение больше не нужно.

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

clearTimeout(timerId);

Практический пример: пользователь начал действие, но отменил его до завершения задержки.

let saveTimer = null;

function scheduleSave() {
  clearTimeout(saveTimer);

  saveTimer = setTimeout(() => {
    console.log('Данные сохранены');
  }, 1000);
}

scheduleSave();
scheduleSave();
scheduleSave();

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

Что такое setInterval

setInterval запускает функцию не один раз, а регулярно через заданный промежуток времени.

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

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

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

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

Практический пример: обратный отсчёт

Один из самых понятных примеров использования setInterval — таймер обратного отсчёта.

let secondsLeft = 5;

const countdownId = setInterval(() => {
  console.log(secondsLeft);
  secondsLeft--;

  if (secondsLeft < 0) {
    clearInterval(countdownId);
    console.log('Время вышло');
  }
}, 1000);

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

setTimeout вместо setInterval: когда так лучше

setInterval не ждёт, пока завершится предыдущая операция. Если внутри интервала находится долгий код или запрос к серверу, новые запуски могут накладываться друг на друга. В таких случаях часто лучше использовать рекурсивный setTimeout: следующий запуск планируется только после завершения текущего.

function pollServer() {
  console.log('Запрашиваем данные...');

  setTimeout(() => {
    console.log('Планируем следующий запрос');
    pollServer();
  }, 3000);
}

pollServer();

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

Типичные ошибки с таймерами

1. Функция вызывается сразу

Новички часто случайно вызывают функцию вместо того, чтобы передать её в таймер.

function showMessage() {
  console.log('Привет');
}

setTimeout(showMessage(), 1000); // ошибка
setTimeout(showMessage, 1000);   // правильно

В первом случае showMessage() выполнится немедленно, а результат её выполнения попадёт в setTimeout.

2. Потеря идентификатора таймера

Если вы не сохранили результат setInterval, остановить конкретный интервал будет сложно.

const id = setInterval(() => {
  console.log('Работаем');
}, 1000);

clearInterval(id);

3. Ожидание идеальной точности

Задержка в таймерах — это не гарантия выполнения ровно через указанное время. Если основной поток занят, callback выполнится позже. Поэтому не стоит строить точные часы только на увеличении счётчика каждую секунду. Для точного времени лучше сравнивать текущую дату с начальной.

const startedAt = Date.now();

setInterval(() => {
  const elapsedSeconds = Math.floor((Date.now() - startedAt) / 1000);
  console.log('Прошло секунд:', elapsedSeconds);
}, 1000);

Передача аргументов в setTimeout

Аргументы можно передать после задержки, но на практике чаще используют стрелочную функцию — так код читается понятнее.

function greet(name) {
  console.log('Привет, ' + name);
}

setTimeout(greet, 1000, 'Анна');

setTimeout(() => {
  greet('Иван');
}, 1000);

Рекомендации по использованию таймеров

• Всегда сохраняйте идентификатор таймера, если его нужно будет отменять.
• Очищайте интервалы при закрытии модальных окон, смене экранов или удалении компонента.
• Не используйте setInterval для операций, которые могут выполняться дольше интервала.
• Для точного измерения времени опирайтесь на Date.now(), а не только на количество срабатываний.
• Не передавайте строку кода в таймер: setTimeout('alert(1)', 1000) — плохая практика.

Если вы хотите не просто запомнить синтаксис, а уверенно понимать асинхронность, DOM, события, формы и работу с реальными проектами, посмотрите курс «JavaScript с нуля до уровня уверенного разработчика» — он хорошо дополняет такие базовые темы практикой.

Краткий итог

setTimeout выполняет код один раз с задержкой, а setInterval запускает его регулярно. Для отмены используются clearTimeout и clearInterval. Самая важная привычка — контролировать жизненный цикл таймеров: запускать их осознанно и вовремя очищать. Тогда таймеры в JavaScript будут полезным инструментом, а не источником скрытых ошибок.