How to stop javascript timer from resetting when it completes

Question

I am building a form that a I need a simple 10 minute javascript countdown timer to display in. I have found and am using the code at the top of the page here: The simplest possible JavaScript countdown timer? .. It does exactly what I need it to, but I need the timer not to reset when it reaches 00:00. I am a novice when it comes to Javascript, so any help would be appreciated.

I looked through the posting on The simplest possible JavaScript countdown timer? .. but was unable to see anyone that specifically talked about stopping the timer from resetting when it ended.

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 10,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

The timer works as I need it to, but it resets every time it reaches 0. I just need it to start on page load and stop at 10 minutes. I am just reminding my form users to save their draft every 10 minutes.

if (--timer < 0) { timer = duration; } resets the timer. – Kai Lehmann May 08 '19 at 14:14 — Kai Lehmann, May 08 '19 at 14:14

score 1 · Answer 1 · edited May 08 '19 at 14:19

1

Try this:

var myInterval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        clearInterval(myInterval);
    }
}, 1000);

edited May 08 '19 at 14:19

Kai Lehmann

508
4
17

answered May 08 '19 at 14:14

mojtaba ramezani

1,461
16
15

Thank you for the reply! I must be doing something wrong.. again my Java knowledge is limited. I made the change, I thought suggested, but now when my timer reaches 00:00 the numbers starting going negative. – TJLP May 08 '19 at 14:31
@TJLP Beware! Java and JavaScript are totaly different languages. – Kai Lehmann May 08 '19 at 14:47
Right! Thank you Kai. I'll ensure to specify going forward. :) So yes, my JavaScript experience/knowledge is extremely limited. The forms I build are pretty straight forward and rarely use nothing more than HTML and CSS. Any help on what I could be doing wrong would be highly appreciated. – TJLP May 08 '19 at 14:51

score 0 · Answer 2 · answered May 08 '19 at 20:55

Thanks for all the help. I found another piece of code that did the job for me. I'll share below for anyone else to use.

  //Countdown Timer

  var startTime = 10; //set countdown in Minutes  
  var doneClass = "done";
  var blinkerClass = "blink";
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var intervalLoop = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        for(var i=0;i<display.length;i++){
          display[i].textContent = minutes + ":" + seconds;
        }
        if (--timer < 0) {
          for(var i=0;i<display.length;i++){
            display[i].classList.add(doneClass);
            display[i].classList.add(blinkerClass);
            display[i].textContent = "Save Now";
          }
          clearInterval(intervalLoop);
        }
        }, 1000);
    }
window.onload = function () {
    var setMinutes = 60 * startTime,
    display = $('#timer');
    startTimer(setMinutes, display);
};

  //End Countdown timer

Here is the CSS referenced in the code above


.done {color: tomato !important; font-weight: bold;}
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

How to stop javascript timer from resetting when it completes

2 Answers2