Установите таймер паузы / возобновления в javascript - PullRequest
Новая
       64

Установите таймер паузы / возобновления в javascript

0 голосов
/ 17 июня 2019

Есть ли способ создать класс «таймер» (или секундомер), чтобы таймеры, созданные с использованием этого класса, могли быть приостановлены и возобновлены при запуске события, например, при нажатии кнопки?

Я пыталсясоздайте класс и создайте объекты таймера, используя его, но таймер не может быть приостановлен после его запуска.

Моя попытка создать этот класс: 

class countdown {
    constructor(min, sec) {
        this.mins = min;
        this.secs = sec;
        this.handler = 0;
    }

    static setTimer(x,minfield,secfield) {
        this.handler = setTimeout(() => {
            if (x.mins == 0 && x.secs == 0) {
                clearTimeout();
            } else {
                if (x.secs == 0) {
                    x.mins -= 1;
                    x.secs = 59;
                } else {
                    x.secs -= 1;
                }
            }

            this.updateTimer(x,minfield,secfield);
            this.setTimer(x,minfield,secfield)
        }, 1000)
    }

    static updateTimer(x,minfield, secfield){
        document.getElementById(minfield).innerHTML = x.mins;
        document.getElementById(secfield).innerHTML = x.secs;
    }

    static stopTimer(x,minfield,secfield) {
        // document.getElementById(minfield).innerHTML = x.mins;
        // document.getElementById(secfield).innerHTML = x.secs;
        clearTimeout(x.handler);
    }
}

Использование: 

    let countdown1 = new countdown(15,0);
    let countdown_act = false;
    document.getElementById('button').addEventListener( 'click', () => {
            if (!countdown_act) {
                countdown.setTimer(countdown1, 'ctdwn-mins', 'ctdwn-secs');
                countdown_act = true;
            } else {
                countdown.stopTimer(countdown1, 'ctdwn-mins', 'ctdwn-secs');
                countdown_act = false;
            }
            console.log(countdown_act);
        }
    )

Флаг countdown_act используется для указания состояния таймера.

1 Ответ

0 голосов
/ 17 июня 2019

Нет необходимости для любого из ваших методов быть static.Кроме того, это намного проще и проще в использовании, если вы просто записываете секунды, а затем вычисляете минуты, когда вам нужен результат.Как стандарт, используйте заглавные буквы классов.Наконец, вы, вероятно, ищете setInterval, а не тайм-аут.

Подумайте о реальном таймере.Вы можете установить его, запустить, приостановить и остановить.Остановка таймера на самом деле просто перезапускает и приостанавливает его, и он настроен на создание, поэтому давайте создадим Timer с start, pause, set и stop или reset.Он по-прежнему ведет себя так же, как ваш в фоновом режиме, с использованием тайм-аута 1 с, но для кого-то, кто читает ваш код, намного понятнее и понятнее: 

class Timer {
    constructor(seconds, callback) {
        this.originalTime = seconds;
        this.remainingTime = seconds;
        this.timeout = null;
        this.callback = callback; // This is what the timer does when it ends
    }

    start() {
        this.timeout = setInterval(() => {
            this.remainingTime -= 1; // Remove a second from the timer
            if(this.remainingTime === 0) {
                this.callback(); // Run the callback function
                this.stop(); // Stop the timer to prevent it from counting into the negatives
            }
        }, 1000);
    }

    pause() {
        clearInterval(this.timeout);
    }

    stop() {
        this.pause();
        this.remainingTime = this.originalTime; // Reset the time
    }

    setTime(seconds) {
        this.originalTime = seconds; // Set a new time
        this.stop(); // Have to restart the timer to account for the new time
    }

    get remaining() {
        return {
            seconds: this.remainingTime % 60,
            minutes: Math.floor(this.remainingTime / 60)
        }
    }
}
...