Некорректная работа таймера после паузы
Здравствуйте, уважаемые js - спецы.
Мне подсказали, что вроде как в скрипте таймер после паузы срабатывает некорректно. Я не могу понять почему. Помогите мне пожалуйста разобраться. "use strict"; // Выбираем абзац с контентом начального значения; const clockface = document.querySelector(".time"); // Кнопка старта секундомера const startBtn = document.querySelector(".js-start"); // Кнопка перезагрузки секундомера const resetBtn = document.querySelector(".js-reset"); // Кнопка сохранения значения в массив const lapBtn = document.querySelector(".js-take-lap"); // Список для объектов массива const listItem = document.querySelector(".js-laps"); // Назначаем обработчики событий startBtn.addEventListener('click', handleStartBtnClick); resetBtn.addEventListener('click', handleResetTimer); lapBtn.addEventListener('click', handleAddItem); // Объект таймера const timer = { startTime: null, deltaTime: 0, id: null, isActive: false, start() { if (this.isActive) return; this.isActive = true; this.startTime = Date.now(); this.id = setInterval(() => { const currentTime = Date.now(); this.deltaTime = currentTime - this.startTime; updateClockface(this.deltaTime); }, 100); }, stop() { clearInterval(this.id); this.isActive = false; }, pause() { updateClockface(this.deltaTime); }, continue () { if (this.isActive) return; this.isActive = true; this.textContent = 'Pause'; this.id = setInterval(() => { const currentTime = Date.now(); this.deltaTime = currentTime - this.startTime + this.deltaTime; updateClockface(this.deltaTime); }, 100); }, reset() { this.stop(); this.deltaTime = 0; updateClockface(this.deltaTime); }, }; function handleStartBtnClick() { if (!timer.isActive && !startBtn.hasAttribute('data-set')) { timer.start(); this.textContent = 'Pause'; timer.pause(); resetBtn.disabled = false; } else if (!timer.isActive && startBtn.hasAttribute('data-set')) { timer.continue(); this.textContent = 'Pause'; resetBtn.disabled = false; } else { timer.stop(); this.textContent = 'Continue'; startBtn.setAttribute('data-set', 'active-pause'); } } function handleResetTimer() { timer.reset(); startBtn.textContent = 'Start'; if (!timer.isActive || startBtn.hasAttribute('[data-set = active-pause]')) { resetBtn.disabled = true; } else { resetBtn.disabled = false; timer.isActive = true; } } function handleAddItem() { const item = document.createElement('li'); item.innerHTML = getFormattedTime(timer.deltaTime); listItem.appendChild(item); } function getFormattedTime(time) { const date = new Date(time); let minutes = date.getMinutes(); minutes = minutes < 10 ? `0${minutes}` : minutes; let seconds = date.getSeconds(); seconds = seconds < 10 ? `0${seconds}` : seconds; const mseconds = String(date.getMilliseconds()).slice(0, 1); return `${minutes}:${seconds}.${mseconds}`; } function updateClockface(time) { const formattedTime = getFormattedTime(time); clockface.textContent = formattedTime; } |
AndriiS,
лучше бы полный макет и Рекурсивный setTimeout вместо setInterval |
Часовой пояс GMT +3, время: 02:11. |