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

Question

[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++;
}

Comments

[RAX7]

setInterval(start,1000)
Это не будет срабатывать ровно раз в секунду https://learn.javascript.ru/settimeout-setinterval...

e.__proto__.turn = false
писать что либо в прототип объекта - очень плохой способ хранить состояние таймера https://learn.javascript.ru/prototype-inheritance

if (secCounter === 59) {
//.........

Есть более простой и лаконичный способ перевести секунды в минуты и часы, например так: https://stackoverflow.com/a/1322798

Answer 1

[Rsa97]

Answer 2

[Алексей Дубровин]

оберните это в функцию.

function initLogic () {
// ваш код

return {start, startBySpace}
}
let a = initLogic();//получаем значение
a.start() //вызываем эти функции

Comments

[pinkhead_psd]

Спасибо, решение и правда простое. Может можно еще как-то изменить саму логику, чтобы не заворачивать это в функцию общую, или я слишком запариваюсь?) Такая же функция будет считаться чистой?

[Алексей Дубровин]

pinkhead_psd,
Ну, чистой она не будет.
Есть много побочных эффектов.
На данном этапе, я бы не запаривался над этим.
Все прийдет с опытом.
Суть в том, можно ли бегло прочитать код, я прочитал. (В большинстве случаев, это достаточно)

Если вопрос, как бы я изменил код.
Я бы убрал __proto__. (Не нужно изменять как-то базовые вещи).
Просто сделайте еще одну переменную, в которой будете это хранить.

[pinkhead_psd]

Алексей Дубровин, да, с proto я решил просто разнообразить - с переменной конечно проще и понятнее.
Вот не запариваешься, и с одной стороны приятнее код писать, а с другой стороны потом сидишь и нормально на собесе не можешь объяснить что такое чистая функция...(
Пытаюсь как раз сейчас этот этап перевалить. Углубиться в более специфичные и сложные темы на простых задачках

Answer 3

[Сергей delphinpro]

Модуль 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);
});

Comments

[Сергей delphinpro]

Ну еще я бы убрал из самого модуля навешивание события и предоставил бы наружу два метода - старт и стоп. Тогда будет возможно запускать и останавливать счетчик любыми способами.

[pinkhead_psd]

Спасибо! Похоже что такое можно сразу пушить. Да лучше конечно разделить логику старта и стопа - как минимум проще читать будет

Answer 4

[Stalker_RED]

Такой таймер будет отставать - setInterval не гарантирует испольнение функции раз в секуну, он гарантирует, что запуск будет НЕ РАНЬШЕ чем через секунду. И при загрузке ЦП таймер будет отставать.

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

Comments

[Максим]

Не хочет работать, почему то