@pinkhead_psd

Как сделать таймер без глобальных переменных?

Сделал обычный секундомер. По пробелу он запускается и также останавливается. Однако некоторые переменные определены глобально. Как можно изменить архитектуру кода, чтобы это было написано максимально "профессионально", если так можно сказать
P.S. Под профессионально, я имею ввиду как можно сделать такой же функционал только более лаконично. Условно говоря, если бы я писал этот таймер в продакшн
Вот код:
const hours = document.querySelector('.clocks .hours')
const minutes = document.querySelector('.clocks .minutes')
const seconds = document.querySelector('.clocks .seconds')

document.addEventListener('keydown', startBySpace)
let timer;
function startBySpace(e) {
    if (e.code === 'Space') {
        if (e.__proto__.turn) {
            e.__proto__.turn = false
            console.log('end');
            clearInterval(timer)
        }else{
            e.__proto__.turn = true
            console.log('start');
            timer = setInterval(start,1000)
        }
    }
}

let secCounter = 0;
let minCounter = 0;
let hourCounter = 0;
function start() {
    if (secCounter === 59) {
        secCounter = 0;
        if (minCounter === 59) {
            minCounter = 0;
            hourCounter++;
        } else {
            minCounter++;
        }
    }
    secCounter < 10 ? seconds.innerHTML = `0${secCounter}` : seconds.innerHTML = `${secCounter}`
    minCounter < 10 ? minutes.innerHTML = `0${minCounter}` : minutes.innerHTML = `${minCounter}`
    hourCounter < 10 ? hours.innerHTML = `0${hourCounter}` : hours.innerHTML = `${hourCounter}`
    secCounter++;
}
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@alekcena
Нелинейный наставник
оберните это в функцию.
function initLogic () {
// ваш код

return {start, startBySpace}
}
let a = initLogic();//получаем значение
a.start() //вызываем эти функции
Ответ написан
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Модуль Counter.js
export default class {
    #enabled = false;
    #timer = null;

    #elHours;
    #elMinutes;
    #elSeconds;

    #hours = 0;
    #minutes = 0;
    #seconds = 0;
    
    constructor(el) {
        this.#elHours = el.querySelector('.hours');
        this.#elMinutes = el.querySelector('.minutes');
        this.#elSeconds = el.querySelector('.seconds');
        document.addEventListener('keydown', this.startBySpace.bind(this));
    }
    
    startBySpace() {
        if (e.code === 'Space') {
            if (this.#enabled) {
                this.#enabled = false;
                clearInterval(this.#timer);
            } else {
                this.#enabled = true
                this.#timer = setInterval(() => this.tick(), 1000);
            }
        }
    }
    
    tick() {
        this.#seconds++;
        if (this.#seconds === 60) {
            this.#seconds = 0;
            this.#minutes++;
            if (this.#minutes === 60) {
                this.#minutes = 0;
                this.#hours++;
            }
        }
        this.render();
    }
    
    render() {
        elSeconds.innerHTML = this.zero(this.#seconds);
        elMinutes.innerHTML = this.zero(this.#minutes);
        elHours.innerHTML = this.zero(this.#hours);
    }
    
    zero(number) {
        return number < 10 ? `0${number}` : `${number}`;
    }
}


Использование, например в файле main.js

import Counter from './Counter.js';

document.querySelectorAll('.clocks').forEach(clock => {
    new Counter(clock);
});
Ответ написан
Stalker_RED
@Stalker_RED
Такой таймер будет отставать - setInterval не гарантирует испольнение функции раз в секуну, он гарантирует, что запуск будет НЕ РАНЬШЕ чем через секунду. И при загрузке ЦП таймер будет отставать.

Для точной работы надо запоминать время старта, сравнивать с текущим, и уже разницу отображать.

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы