使用 clearInterval 清除计时器不起作用

Question

I put my work online here :

how to reproduce :

• Click on a green pin on the map to choose a station
• Fill the two inputs name / lastname

• Sign the canvas

• You should see a timer starting 20:00 min

• If you cancel (annule button) the timer
• Then resign the canvas, the timer is still going, its not reset

My timer is in the file /js/timer.js I don't understand why, because I clearInterval my this.setTimer when I call the button line 59, I used timer.cancel method to clearInterval and clear the sessionStorage. But I tried to debug and weird things, this.setTimer appears to be equal to 10, then each time I cancel, this.setTimer increases by 1.

Did I miss something ? The proper behavior should be when I click on "annule" (cancel) the timer reset to 20:00 min

Here my cancel function

cancel = () => {
    this.isPlaying = false;
    clearInterval(this.setTimer);
    sessionStorage.clear();
    console.log(this.setTimer);
    canvas.clear();
    this.timer.innerHTML = 'Votre réservation a été annulée.'
    document.getElementById('reservation-content').classList.remove('hidden');
    document.getElementById('cancel-btn').className = 'hidden';
    document.getElementById('validation-btn').setAttribute('disabled', null)
}

Answer 1

this.delta

stores old value when you subtracted 1000.

after clear interval you need to reset this.delta value again. Try adding

this.delta = (this.endDate - this.now);

after

clearInterval(this.setTimer);

in cancel method.

Hope I answered your question.