Почему таймеры в браузере отстают и как онлайн-таймер остаётся точным

Браузерный таймер остаётся точным, когда он сверяется с часами, а не считает тики. Сохраните время окончания в момент запуска, а затем при каждом обновлении экрана вычитайте текущее время. Тики могут приходить с опозданием или замедляться в фоновой вкладке, но вычитание всё равно даст верный результат в тот момент, когда страница его проверит.

Онлайн-таймерНужен таймер или секундомер?Сделать бесплатно

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

Частый способ написать таймер — каждую секунду вычитать единицу из счётчика. Браузер выполняет этот шаг с помощью повторяющегося таймера, который запускает функцию через заданное количество миллисекунд. Браузер не гарантирует точного времени. Загруженная страница, медленное устройство или скрытая вкладка могут задержать каждый тик, и задержки накапливаются. Счётчик, который теряет несколько миллисекунд на каждом тике, через несколько минут заметно врёт.

Что делают скрытые вкладки

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

Вместо этого — сверка с часами

Решение состоит в том, чтобы запомнить, когда таймер запустили и когда он должен закончиться. Браузер предоставляет высокоточные часы, performance.now(), которые предназначены для измерения интервалов. Когда экран обновляется, таймер вычисляет оставшееся время как время окончания минус текущее время. Поздно пришедшее обновление покажет ненадолго чуть устаревшее число, но следующее обновление его исправит, потому что расчёт не зависит от количества прошедших тиков. Онлайн-таймер на этом сайте работает именно так.

При паузе сохраняется оставшееся время. При возобновлении новое время окончания равно текущему времени плюс оставшееся время, поэтому пауза не нарушает отсчёт.

Страница также ставит один таймер на момент, когда обратный отсчёт должен закончиться. Сигнал тогда не ждёт следующего обновления экрана, даже если экран обновляется с задержкой.

Почему экран округляет вверх

Обратный отсчёт показывает оставшееся время, округлённое вверх до целой секунды. Таймер на 3 секунды в начале показывает 00:03, затем 00:02 и 00:01 по ходу отсчёта и 00:00 по окончании. Округление вниз показало бы 00:00 на последней секунде, и это ощущалось бы как преждевременный финиш. Кухонный таймер работает так же.

Звук и экран

Сигнал создаёт звуковая система браузера, поэтому аудиофайл не загружается. Браузеры разрешают звук только после действия пользователя на странице, поэтому аудио подготавливается, когда вы нажимаете «Старт». Настройки громкости и отключения звука на устройстве по-прежнему действуют.

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

Что измеряет круг секундомера

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

Практические проверки

• Перед тем как полагаться на короткий таймер для готовки или тренировки, сверьте его с часами. Для проверки устройства достаточно теста на 30 секунд.
• Держите громкость включённой и убедитесь, что устройство не в беззвучном режиме.
• Таймер идёт точно, пока вкладка скрыта, но закрытие вкладки или перезагрузка страницы сбрасывают его.
• Если ноутбук уходит в спящий режим во время обратного отсчёта, проверьте оставшееся время после пробуждения, потому что поведение в спящем режиме зависит от устройства и браузера.

Как это сделать в fixmint

1. Выберите Таймер, затем нажмите готовую настройку, например 5 мин, или введите значения в поля Часы, Минуты и Секунды.
2. Нажмите Старт. Можно переключаться между вкладками, время при этом останется верным. Перезагрузка страницы сбрасывает таймер.
3. Отметьте Не выключать экран во время работы, если браузер предлагает эту опцию.
4. Для кругов выберите Секундомер, нажмите Старт», затем Круг** для каждого промежуточного результата.
5. Перед тем как полагаться на таймер для готовки или тренировки, сверьте тест на 30 секунд с часами.

Особые случаи

• Переход на другое время. Обратный отсчёт измеряет прошедшее время, а не настенные часы, поэтому переход на летнее и зимнее время на него не влияет.
• Долгие таймеры. Таймер на несколько часов по-прежнему точен, но проверьте, не уходило ли устройство в спящий режим за это время.
• Несколько таймеров. Каждый таймер хранит собственное время окончания, поэтому два таймера в двух вкладках не мешают друг другу.

Быстрые ответы

Почему таймер отстаёт в фоновой вкладке? Браузеры замедляют повторяющиеся таймеры в скрытых вкладках, поэтому таймер, который считает тики, отстаёт. Таймер, который сверяется с часами, не отстаёт.

Будет ли таймер показывать верное время, когда я вернусь на вкладку? Да. Он показывает оставшееся время по сохранённому времени окончания.

В чём разница между кругом и общим временем? Круг — это время с предыдущего круга. Общее время — это время с момента запуска секундомера.