Таймер обратного отсчета

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

Движок обратного отсчёта не использует setInterval(callback, 1000) как авторитетный источник времени — этот подход накапливает дрейф, поскольку спецификация HTML5 event-loop гарантирует только минимальную задержку, а не фиксированную частоту. Вместо этого страница фиксирует startTime через Date.now() (или performance.now() для субмиллисекундного разрешения) и при каждом тике вычисляет remaining = targetDuration - (Date.now() - startTime). Обновление дисплея управляется requestAnimationFrame, который браузер ограничивает частотой вертикальной синхронизации (обычно 60 Гц / 16,67 мс, иногда 120 Гц на ноутбуках и телефонах с высокой частотой обновления). Такая самокорректирующаяся конструкция удерживает отображаемые секунды синхронизированными с реальным временем даже после остановок очереди задач JavaScript на сборку мусора или длительный layout. Фоновое ограничение таймеров — главный источник неожиданностей. По HTML Living Standard скрытые вкладки ограничивают setInterval/setTimeout минимальной задержкой в 1000 мс (Chrome, Firefox, Safari реализуют это собственными эвристиками; Chrome дополнительно замораживает неактивные вкладки примерно через 5 минут от батареи). Page Visibility API (document.visibilityState, document.hidden, событие visibilitychange) позволяет таймеру обнаружить переключение вкладки и сверить внутренние часы с Date.now() при возврате вкладки на передний план. Звук окончания отсчёта воспроизводится через Web Audio API (AudioContext + OscillatorNode или предзагруженный AudioBuffer), для которого в iOS Safari и современном Chrome требуется предварительная активация пользовательским жестом в соответствии с политикой автовоспроизведения. Дополнительно отображается визуальное оповещение, а если пользователь ранее дал разрешение, можно отправить системное уведомление через Notification API. Режим нескольких таймеров хранит каждый таймер в собственном объекте состояния с независимым startTime; единый цикл requestAnimationFrame перебирает массив каждый кадр вместо запуска отдельного интервала на каждый таймер, что поддерживает постоянную нагрузку на процессор при росте числа таймеров. Сохранение между перезагрузками использует localStorage с сериализованным endTime, поэтому страница может пересчитать оставшееся время при монтировании. Учтите, что корректировки системных часов ОС (ручное изменение времени, шаг NTP или переход на летнее/зимнее время) мгновенно сдвигают Date.now() и могут вызвать скачок восстановленного таймера — performance.now() монотонен и предпочтителен, когда важно только прошедшее время в рамках одной загрузки страницы.

• Используйте Date.now() или performance.now() как единственный источник истины; никогда не доверяйте накопленным тикам setInterval.
• requestAnimationFrame ограничивает перерисовку частотой вертикальной синхронизации (60 Гц = ~16,67 мс; 120 Гц = ~8,33 мс).
• Скрытые вкладки ограничивают setInterval минимальной задержкой 1000 мс по спецификации HTML; Chrome может заморозить страницу примерно через 5 минут от батареи.
• Page Visibility API (событие visibilitychange) — это хук для сверки таймера при возврате вкладки на передний план.
• Web Audio API требует предварительной активации пользовательским жестом в iOS Safari и Chrome для удовлетворения политики автовоспроизведения.
• Notification API требует Notification.requestPermission() и безопасного контекста (HTTPS или localhost).
• performance.now() монотонен при шагах NTP и переходах DST; Date.now() — нет, выбирайте с учётом этой особенности.