Онлайн секундомер

Онлайн секундомер — это точный инструмент измерения времени, который отсчитывает прошедшее время от нуля вверх, обычно с миллисекундным разрешением. В отличие от таймера обратного отсчёта, секундомер отвечает на вопрос «сколько времени это заняло?», что делает его идеальным для спортивных тренировок, лабораторных экспериментов, презентаций, приготовления пищи, программирования и любых задач, где нужно отслеживать длительность, а не соблюдать фиксированный конечный срок. Инструмент полностью работает в браузере, используя requestAnimationFrame для плавного обновления дисплея и performance.now() для монотонного измерения времени, поэтому он остаётся точным даже при корректировке системных часов. Запись кругов позволяет фиксировать промежуточные результаты с выделением лучшего/худшего круга, и все данные остаются локальными — ничего не загружается.

Движок секундомера полностью избегает подверженного дрейфу шаблона setInterval. Вместо этого он использует requestAnimationFrame (rAF) для обновления дисплея и performance.now() как авторитетный источник времени. Когда пользователь нажимает «Старт», движок записывает текущую метку времени performance.now() как startTime. На каждом кадре анимации он вычисляет elapsed = accumulated + (performance.now() - startTime), где accumulated хранит общее прошедшее время до последней паузы. Эта двухпеременная модель (накопленное время + дельта выполнения) корректно обрабатывает циклы паузы/возобновления без потери субмиллисекундной точности. performance.now() выбран вместо Date.now(), потому что он монотонен — он никогда не откатывается назад из-за коррекций NTP, ручного изменения часов или перехода на летнее время. Он также обеспечивает субмиллисекундное разрешение (обычно 5 мкс в современных браузерах), что делает его правильными часами для краткосрочного высокоточного хронометража. Обратный вызов rAF ограничен частотой обновления дисплея (обычно 60 Гц = ~16,67 мс, до 120 Гц на дисплеях с высокой частотой обновления), поэтому визуальное обновление плавное, но не является эталонным значением — фактическое прошедшее время берётся из вычисления performance.now(), которое постоянно корректно. Запись кругов фиксирует текущее elapsedMs в момент нажатия кнопки «Круг», вычисляя разницу с общим временем предыдущего круга. Лучшие и худшие круги определяются сравнением всех разниц кругов с помощью Math.min/Math.max, и дисплей выделяет их зелёным и красным стилями соответственно. Всё состояние хранится в хуках React useState внутри клиентского компонента, и никакие данные не сохраняются и не передаются — секундомер эфемерен по своей природе, полностью сбрасываясь при закрытии страницы или нажатии кнопки «Сброс».

• performance.now() предоставляет монотонные метки времени с субмиллисекундной точностью — невосприимчив к изменениям системных часов.
• requestAnimationFrame управляет обновлением дисплея на частоте обновления (60–120 Гц) для плавного рендеринга.
• Модель накопленного времени + дельты выполнения обрабатывает паузу/возобновление без потери точности.
• Разницы кругов вычисляются как currentTotal - previousTotal для точного промежуточного хронометража.
• Все вычисления выполняются локально в браузере; никаких обращений к серверу или загрузки данных.