CODEWITHSUNDEEP
javascripthtml
user3261093
user3261093

Reputation: 3

Restart timer anytime button is clicked again

I have a button when clicked starts a timer. Problem is when the button is clicked again the timer doesn't restart, it just goes crazy fast.

var timeleft = 1800;
function rig() {
var Timer = setInterval(function 
   function1(){ 
document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + "&nbsp"+"minutes remaining";
timeleft -= 1;
if(timeleft <= 0){
clearInterval(Timer);
document.getElementById("countdown").innerHTML = "Time out"
  }
}, 1000);
    console.log(countdown)
}


<p id="countdown"></p>
<button onclick="rig();">Start Time</button>

Upvotes: 0

Views: 743

Answers (1)

Reza Saadati
Reza Saadati

Reputation: 5419

Use a variable that you set whenever the timer gets started and stopped.

Pause the time

let timeBreak = false;
var timeleft = 1800;

function rig() {
  if (!timeBreak) {
      timer = setInterval(function function1() {

      document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + "&nbsp" + "minutes remaining";
      timeleft -= 1;
      if (timeleft <= 0) {
        clearInterval(timer);
        document.getElementById("countdown").innerHTML = "Time out"
      }
    }, 1000);
    timeBreak = true;
  } else {
    clearInterval(timer);
    timeBreak = false;
  } 
}
<p id="countdown"></p>
<button onclick="rig();">Start Time</button>

Reset the time

let timeBreak = false;
var timeleft = 1800;

function rig() {
  if (!timeBreak) {
    timer = setInterval(function function1() {

      document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + "&nbsp" + "minutes remaining";
      timeleft -= 1;
      if (timeleft <= 0) {
        clearInterval(timer);
        document.getElementById("countdown").innerHTML = "Time out"
      }
    }, 1000);
    timeBreak = true;
  } else {
    document.getElementById("countdown").innerHTML = ''; // Remove that line if you want to see the stopped time
    clearInterval(timer);
    timeleft = 1800;
    timeBreak = false;
  } 
}
<p id="countdown"></p>
<button onclick="rig();">Start Time</button>

Also ensure that you are not using var, let or const before timer, since you want to use that variable out of scope.

Upvotes: 2

Related Questions