Создание таймера обратного отсчёта до праздника на JavaScript

Каждый декабрь разработчики сталкиваются с одним и тем же запросом: создать обратный отсчёт до Рождества, Нового года или другого праздника. Звучит просто, пока ваш таймер не начнёт отставать на минуты, ломаться при переключении вкладок или показывать отрицательные значения после полуночи.

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

Почему декремент счётчиков не работает

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

Проблема в дрейфе таймера setInterval. Таймеры JavaScript не гарантируют точное выполнение. Когда пользователь переключает вкладки, браузеры замедляют таймеры для экономии ресурсов — иногда срабатывая раз в секунду, иногда раз в минуту. Ваш счётчик продолжает декрементироваться, как будто время прошло нормально, но это не так.

Решение простое: пересчитывайте оставшееся время на каждом тике, сравнивая Date.now() с целевой датой. Таким образом, даже если ваш таймер сработает с опозданием, отображаемое время останется точным.

Установка целевой даты

Для обратного отсчёта до праздника обычно требуется полночь определённой календарной даты в локальном часовом поясе пользователя. Вот как правильно это настроить:

function getTargetDate(month, day) {
  const now = new Date()
  const year = now.getFullYear()
  
  // If the holiday has passed this year, target next year
  const target = new Date(year, month - 1, day, 0, 0, 0)
  if (target <= now) {
    target.setFullYear(year + 1)
  }
  
  return target
}

const christmasTarget = getTargetDate(12, 25)

Использование new Date(year, month, day) автоматически создаёт дату в локальном часовом поясе пользователя. Это решает вопрос с часовыми поясами JavaScript без необходимости в какой-либо библиотеке — обратный отсчёт показывает время до полуночи 25 декабря, где бы ни находился пользователь.

Примечание о летнем времени: объект Date в JavaScript автоматически обрабатывает переходы на летнее время при таком способе создания дат. Обратный отсчёт остаётся точным даже при переводе часов.

Основная логика обратного отсчёта

Вот готовая к продакшену реализация, которая решает распространённые проблемы:

function createCountdown(targetDate, onUpdate, onComplete) {
  let intervalId = null
  
  function calculateRemaining() {
    const now = Date.now()
    const difference = targetDate.getTime() - now
    
    // Prevent negative values
    if (difference <= 0) {
      clearInterval(intervalId)
      onComplete()
      return null
    }
    
    return {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / (1000 * 60)) % 60),
      seconds: Math.floor((difference / 1000) % 60)
    }
  }
  
  function tick() {
    const remaining = calculateRemaining()
    if (remaining) {
      onUpdate(remaining)
    }
  }
  
  // Run immediately, then every second
  tick()
  intervalId = setInterval(tick, 1000)
  
  // Return cleanup function
  return () => clearInterval(intervalId)
}

Этот подход решает сразу несколько проблем:

• Нет дрейфа: время пересчитывается заново на каждом тике
• Нет отрицательных значений: обратный отсчёт останавливается и очищает интервал при завершении
• Правильная очистка: возвращаемая функция позволяет остановить таймер при необходимости
• Устойчивость к троттлингу вкладок: даже если тики задерживаются, отображаемое время остаётся корректным

Подключение к DOM

Подключите обратный отсчёт к вашему HTML:

const display = document.getElementById('countdown')
const cleanup = createCountdown(
  christmasTarget,
  ({ days, hours, minutes, seconds }) => {
    display.textContent = `${days}д ${hours}ч ${minutes}м ${seconds}с`
  },
  () => {
    display.textContent = "Наступило!"
  }
)

// Call cleanup() when navigating away in a SPA

Обработка граничных случаев

Уже прошло: функция getTargetDate автоматически переходит на следующий год, если праздник уже прошёл.

Очистка интервалов: всегда сохраняйте идентификатор интервала и очищайте его, когда обратный отсчёт завершается. Невыполнение этого приводит к утечкам памяти, особенно в одностраничных приложениях.

Доступность: рассмотрите возможность добавления aria-live="polite" к контейнеру обратного отсчёта, чтобы программы чтения с экрана объявляли обновления, не создавая помех.

Взгляд в будущее

Предстоящий Temporal API значительно упростит работу с датой и временем в JavaScript, со встроенной явной поддержкой часовых поясов. Пока он не появится во всех браузерах, показанные здесь паттерны остаются надёжным выбором.

Заключение

Создавайте свой виджет обратного отсчёта до праздника на JavaScript, используя вычисления разницы во времени, а не декремент счётчиков. Ваш таймер останется точным независимо от троттлинга браузера, переключения вкладок или переходов на летнее время — и вы избежите головной боли с отладкой, которую создают более простые подходы.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.