Таймеры и обратный отсчёт в JavaScript

• setTimeout() и setInterval()
• Обратный отсчёт до даты
• Почему нужна дата окончания

Таймер позволяет запустить код через некоторое время или повторять его с заданным интервалом. Для этого используют setTimeout() и setInterval().

setTimeout() и setInterval()

setTimeout() запускает функцию один раз после задержки.

setTimeout(() => {
  console.log('Прошло две секунды');
}, 2000);

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

const timerId = setInterval(() => {
  console.log('Проверяем время');
}, 1000);

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

Задержка указывается в миллисекундах: 1000 - одна секунда.

Обратный отсчёт до даты

Создадим элемент для вывода таймера.

<p id="timer"></p>

В переменной deadline хранится момент окончания. При каждом обновлении вычитаем из него текущее время.

const timerElement = document.querySelector('#timer');
const deadline = new Date(2026, 11, 31, 0, 0).getTime();

function updateCountdown() {
  const difference = deadline - Date.now();

  if (difference <= 0) {
    clearInterval(timerId);
    timerElement.textContent = 'Время вышло';
    return;
  }

  const totalSeconds = Math.floor(difference / 1000);
  const days = Math.floor(totalSeconds / 86400);
  const hours = Math.floor((totalSeconds % 86400) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  timerElement.textContent = `${days} д. ${String(hours).padStart(2, '0')} ч. ${String(minutes).padStart(2, '0')} мин. ${String(seconds).padStart(2, '0')} сек.`;
}

const timerId = setInterval(updateCountdown, 1000);

updateCountdown();

Функция вызывается сразу, поэтому пользователь не ждет первую секунду. Когда дата наступит, clearInterval() остановит таймер.

Почему нужна дата окончания

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

В примере каждый раз вычисляется разница между deadline и Date.now(). Поэтому после возвращения на вкладку таймер сразу покажет правильное оставшееся время.