CODEWITHSUNDEEP
javascriptjquery
nonono
nonono

Reputation: 601

Stopping a countdown on click

I have set a function to start counting down from 25 minutes upon clicking a button. I was also able to make it reset back to 25 minutes when clicking the Reset button, but it continues counting down. How do I make it so that when the Reset button is clicked the text reverts back to 00:25:00 and stays there until Go is clicked again?

JavaScript: 

function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";

Here's the fiddle. Thanks!

Upvotes: 1

Views: 83

Answers (6)

Redu
Redu

Reputation: 26161

When setTimeout() is used with a pseudo recursive approach togenerate timed intervals clearTimeout() might not be useful. But instead you might do as follows.

var reset = false;

function count() {
  var startTime = timeDisplay.textContent;
  var pieces = startTime.split(":");
  var time = new Date();
  time.setHours(pieces[0]);
  time.setMinutes(pieces[1]);
  time.setSeconds(pieces[2]);
  var timedif = new Date(time.valueOf() - 1000);
  var newtime = timedif.toTimeString().split(" ")[0];
  timeDisplay.textContent = newtime;
  !reset ? setTimeout(count, 1000) : timeDisplay.textContent = "00:25:00";
}

goButton.onclick = function() {
  reset = false;
  count();
}

resetButton.onclick = function() {
  reset = true;
}
<div id="tomato" class="absolute-center">
  <h1 id="timeDisplay">00:25:00</h1>
  <div id="gores" class="absolute-center">
    <button id="resetButton">reset</button>
    <button id="goButton">go</button>
  </div>
</div>

Upvotes: 1

Jecoms
Jecoms

Reputation: 2848

If you set the timeout to a variable in the outer scope, you can use clearTimeout to stop it.

var countdownRunner; // added this

function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    countdownRunner = setTimeout(count, 1000); 
}

$("#go").click(function() {   
    count();
});

$("#reset").click(function() {
    clearTimeout(countdownRunner);
    document.getElementById("time").innerHTML = "00:25:00";    
});

Upvotes: 0

jpk1217
jpk1217

Reputation: 11

When you call setTimeout(count,1000) you need to keep the reference to the timeout ID. Store that value in a higher level variable and after you reset the clock call clearTimeout(ID)

Here's an Updated Fiddle

Upvotes: 1

j08691
j08691

Reputation: 207901

You need to clear your setInterval call with clearInterval:

var clr;
function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    clr=setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";
    clearInterval(clr);
})

jsFiddle example

var clr;

function count() {
  var startTime = document.getElementById("time").innerHTML;
  var pieces = startTime.split(":");
  var time = new Date();
  time.setHours(pieces[0]);
  time.setMinutes(pieces[1]);
  time.setSeconds(pieces[2]);
  var timedif = new Date(time.valueOf() - 1000);
  var newtime = timedif.toTimeString().split(" ")[0];
  document.getElementById("time").innerHTML = newtime;
  clr = setTimeout(count, 1000);
}

$("#go").click(function() {
  count();
})

$("#reset").click(function() {
  document.getElementById("time").innerHTML = "00:25:00";
  clearInterval(clr);
})
@import 'https://fonts.googleapis.com/css?family=Montserrat';
 body {
  background-color: bisque;
  font-family: 'Montserrat', sans-serif;
}
.container-fluid {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#tomato {
  background-color: #D72028;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 8px solid #A01C20;
  margin-top: 150px;
}
#reset {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
  margin-right: 5;
}
#reset:active {
  background-color: #d63a2f;
}
#go {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
}
#go:active {
  background-color: #d63a2f;
}
#gores {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 60%;
  z-index: 10;
}
#time {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 38%;
  font-size: 4em;
  color: #FFFFD7;
  z-index: 10;
}
#title {
  display: block;
  text-align: center;
  font-size: 2.5em;
  font-family: 'Montserrat', sans-serif;
  color: #691112;
  font-weight: bold;
}
#desc {
  text-align: center;
  color: #691112;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">

  <h3 id="title">Pomodoro</h3>
  <p id="desc">Welcome to Pomodoro Timer! Press go to start counting down from 25 minutes, or set it to whatever time you need.</p>


  <div id="tomato" class="absolute-center">
    <h1 id="time" class="absolute-center">00:25:00</h1>

    <div id="gores" class="absolute-center">
      <button id="reset">reset</button>
      <button id="go">go</button>
    </div>
  </div>


</div>

Upvotes: 5

user6748331
user6748331

Reputation: 

var timerId;

function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    timerId = setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    clearTiemout(timerId);
    document.getElementById("time").innerHTML = "00:25:00";
    count();
})

Upvotes: 1

StephenTG
StephenTG

Reputation: 2647

You can use clearTimeout() to cancel a setTimeout. You'll need to save your timeout in a variable and reference it from reset.

var timer;
function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    timer = setTimeout(count, 1000);
}

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";
    clearTimeout(timer);
}

Also note that currently you can click Go again while the timer is running, and you'll run out the clock twice as fast. You might want to disable the Go button while the clock is going

Upvotes: 2

Related Questions