Секундомер
Условие
Секундомер с точностью до 10 мс. Требования: · <span class="time"> показывает прошедшее время в миллисекундах числом; · <button class="start">, <button class="stop">, <button class="reset">; · пауза сохраняет накопленное, старт продолжает с него; · сброс обнуляет и останавливает; · повторное нажатие «старт» на идущем секундомере ничего не ломает; · таймер снимается при размонтировании.
Что проверяют тесты
стартует с нуля
идёт после старта
пауза останавливает
продолжает с накопленного
сброс обнуляет и останавливает
повторный старт не ускоряет
таймер снимается
Как подойти
Ключевое решение - считать по часам, а не накоплением. setInterval(…, 10) не даёт ровно 10 мс: при загруженном потоке шаги пропускаются, и elapsed += 10 начинает отставать всё сильнее. Правильная модель: база плюс разница от Date.now() на момент отрисовки; интервал нужен только чтобы перерисовать. Отсюда же тривиально получается пауза. Что назвать вслух: requestAnimationFrame вместо интервала для плавности, вкладка в фоне и троттлинг таймеров, форматирование в мм:сс.мс.
Подсказки: 3
- Не накапливай время сложением в интервале - он не гарантирует точность шага.
- Храни момент старта и накопленную базу, а текущее считай как разницу с Date.now().
- Интервал перезапускается только при смене признака «идёт/стоит».
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.