Таймер объекта не работает должным образом (кнопка паузы, кнопка воспроизведения)

Question

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

Но когда я пытаюсь сделать паузу (в console.log), мой таймер возвращает -1 (-2, -3 и т. Д.).) на каждый клик.

Как мне предотвратить это?

class Timer{

    constructor(times){
        this.time = times;
        this.buttonPlay = document.getElementById('play')
        this.buttonPause = document.getElementById('pause')
        this.buttonStop = document.getElementById('stop')
        this.displayTimer = document.getElementById('timer')
    }

    decrementTime(){
        t.buttonPlay.addEventListener('click', function(){
            let checked = 0
            let s = setInterval(()=>{
                console.log(t.time[checked]--)
                if(t.time[checked]<0){
                    checked++;
                    console.log('checked = '+ checked)
                    if(checked === 3){
                        clearInterval(s)
                    }
                }
            }, 1000)
            t.buttonPause.addEventListener('click', function(){
                clearInterval(s);
            })
        })
    }
}

let t = new Timer([4, 7, 8]);
t.decrementTime()

Answer 1

«-1» вы получаете, потому что каждый раз, когда вы нажимаете кнопку воспроизведения, ваша программа начинает проверку с первого элемента.

Чтобы избежать этого, просто переместите let checked = 0 за пределы прослушивателя событий:

class Timer {

    constructor(times) {
        this.time = times;
        this.buttonPlay = document.getElementById('play')
        this.buttonPause = document.getElementById('pause')
        this.buttonStop = document.getElementById('stop') //does nothing on this script
        this.displayTimer = document.getElementById('timer') //does nothing on this script
    }

    decrementTime() {
        let checked = 0
        t.buttonPlay.addEventListener('click', function () {
            let s = setInterval(() => {
                console.log(t.time[checked]--)
                if (t.time[checked] < 0) {
                    checked++;
                    console.log('checked = ' + checked)
                    if (checked === t.time.length) {
                        clearInterval(s)
                    }
                }
            }, 500)
            t.buttonPause.addEventListener('click', function () {
                clearInterval(s);
            })
        })
    }
}

let t = new Timer([4, 7, 8,50]);
t.decrementTime()

<button id="play">Play</button>
<button id="pause">pause</button>
<button id="stop" disabled>stop</button>
<button id="timer" disabled>timer</button>

РЕДАКТИРОВАТЬ: Я также изменил условие остановки, чтобы можно было обрабатывать массивы любой длины, и добавил большее значение только для тестирования