Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2018, 13:02
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 28

Некорректная работа таймера после паузы
Здравствуйте, уважаемые 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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2018, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

AndriiS,
лучше бы полный макет и Рекурсивный setTimeout вместо setInterval
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа скрипта после ajax обновления Nonamer jQuery 1 11.02.2011 15:19
Некорректная работа скрипта defond Серверные языки и технологии 15 24.01.2011 18:07
Подгрузка select и работа с ними после! BASSON_XVI jQuery 3 07.01.2011 11:28
Некорректная работа ф-ции Dimonya Events/DOM/Window 7 15.04.2010 14:12
Некорректная работа lightwindow в ie6,7,8 nastya Internet Explorer 1 20.11.2009 07:52