Что делает инструмент
Комбинированный таймер: секундомер для замера прошедшего времени и счётчик с обратным отсчётом для напоминания. Особенность — несколько таймеров одновременно, что обычный «один таймер на iPhone» не позволяет.
Чисто браузерное решение: requestAnimationFrame для плавного UI секундомера, Date.now() для точности, Web Audio для сигнала окончания, Notification API для системных уведомлений. Никаких зависимостей.
Сценарии использования
- Тренировки. Секундомер с lap-разметкой: бег по кругу, плавание, велосипед.
- Кулинария. 3 таймера одновременно: пельмени, овощи, соус — каждый со своим временем.
- Учёба и продуктивность. Помодоро + таймер для перерыва + таймер до конца лекции = 3 параллельных.
- Презентации. Lap timer для каждой части: видеть динамику, не выходить за расписание.
- Игры и спорт. Шахматы (но для них есть отдельный chess clock), карточные игры на время.
- Эксперименты. Контроль времени в физических/химических опытах.
- A/B тестирование UX. Замерить сколько занимает у пользователя задача в каждой версии интерфейса.
Точность измерений
Внутри: для секундомера используется паттерн baseTime + (Date.now() - startTime), где baseTime — накопленное время на pause. Это устойчиво к pause/resume — нет дрифта. UI обновляется через requestAnimationFrame (~60 fps) — выглядит плавно даже при отображении миллисекунд.
Для таймеров — другая стратегия: target = Date.now() + remaining, проверка каждые 250ms. Даже если браузер throttle-ит фоновую вкладку (Chrome замедляет setInterval до 1Hz в неактивных табах), при возврате к табу таймер мгновенно подкорректируется по target — нет накопленной ошибки.
- requestAnimationFrame — MDN. Mozilla. developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame. 2024.
- Page Lifecycle API & background throttling. web.dev. developer.chrome.com/blog/timer-throttling-in-chrome-88. 2021.
