How fix an error in a timer stop function?

Question

I'm working in a Timer app, but there is a function that doesn't work as is supposed to:

When the timer reach 00:00:00 the function "resetTimer" should stop it and return the configurated values, but the timer stills going down, until reach negative numbers.
When you click the reset button the timer must be reseted, but actually it only goes faster.

I'll left the code here. Thank you in advance

const starTimer = () => {
    startButton.addEventListener('click', ()=> {
        hours.remainTime = document.querySelector('.remainHours').value,
        minutes.remainTime = document.querySelector('.remainMinutes').value
        seconds.remainTime = document.querySelector('.remainSeconds').value

    interval = setInterval(()=> {
        if (seconds.remainTime === "00" && parseInt(minutes.remainTime) > 0) {
            countdown(minutes)
            seconds.remainTime = "60"
        }
        if (seconds.remainTime === "00" && parseInt(minutes.remainTime) == 0 && parseInt(hours.remainTime) > 0) {
            countdown(hours)
            minutes.remainTime = "59"
            seconds.remainTime = "60"
        } 
        if (seconds.remainTime === "00" && parseInt(minutes.remainTime) == 0 && parseInt(hours.remainTime) == 0) {
            audio.play()
            resetTimer()
        }
        countdown(seconds)
        title.innerHTML = `${hours.remainTime}:${minutes.remainTime}:${seconds.remainTime}`
    },1000)
})
}

const resetTimer = () => {
    resetButton.addEventListener('click',()=> {
    clearInterval(interval);
    hours.remainTime = hours.configuredTime;
    minutes.remainTime = minutes.configuredTime;
    seconds.remainTime = seconds.configuredTime;
    hours.element.value = hours.configuredTime;
    minutes.element.value = minutes.configuredTime;
    seconds.element.value = seconds.configuredTime;

    starTimer();
})
}

because u add event listeners but never remove them.. instead of `someFunction(){addEventListener(functionThatDoesStuff)}` how about `addEventListener(functionThatDoesStuff)` — The Bomb Squad, Jul 16 '21 at 23:34

score 0 · Answer 1 · answered Jul 16 '21 at 23:58

There is a lot simpler way of doing what you're doing but as to why your thing wasn't working is because there are a pack of listeners that you aren't removing each time

const starTimer = () => { //starTimer AND interval would be accessible to resetTimer
    starTimerFunction = () => {
        hours.remainTime = document.querySelector('.remainHours').value,
        minutes.remainTime = document.querySelector('.remainMinutes').value
        seconds.remainTime = document.querySelector('.remainSeconds').value
        interval = setInterval(()=> {
            if (seconds.remainTime === "00" && parseInt(minutes.remainTime) > 0) {
                countdown(minutes)
                seconds.remainTime = "60"
            }
            if (seconds.remainTime === "00" && parseInt(minutes.remainTime) == 0 && parseInt(hours.remainTime) > 0) {
                countdown(hours)
                minutes.remainTime = "59"
                seconds.remainTime = "60"
            } 
            if (seconds.remainTime === "00" && parseInt(minutes.remainTime) == 0 && parseInt(hours.remainTime) == 0) {
                audio.play()
                resetTimer()
            }
            countdown(seconds)
            title.innerHTML = `${hours.remainTime}:${minutes.remainTime}:${seconds.remainTime}`
        },1000)
    }
    startButton.addEventListener('click',starTimerFunction);
}

const resetTimer = () => {
    clearInterval(interval); //clear interval
    startButton.removeEventListener('click',starTimerFunction); //remove listener
    hours.remainTime = hours.configuredTime;
    minutes.remainTime = minutes.configuredTime;
    seconds.remainTime = seconds.configuredTime;
    hours.element.value = hours.configuredTime;
    minutes.element.value = minutes.configuredTime;
    seconds.element.value = seconds.configuredTime;
    starTimer(); //place new listener
}

resetButton.addEventListener('click',resetTimer);

btw that `resetTimer` doesn't *restart* the timer.. it just puts everything back to before the timer started waiting for the user to click `startButton` — The Bomb Squad, Jul 16 '21 at 23:59
I mean setting up the timer doesn't need that many globals.. you can use time integers like `Date.now()` and do math @JulioSalas a timer function in https://stackoverflow.com/a/64635899/10697213 is an example of what I mean of using a number and then some simple math — The Bomb Squad, Jul 17 '21 at 01:30

How fix an error in a timer stop function?

1 Answers1