CODEWITHSUNDEEP
javascriptsettimeout
hugo
hugo

Reputation: 79

How can i reset my countdown and avoid multiple timer

I made a timer countdown in js. It runs after a click event. The issue is when i click again the timer doesn't reset and it creates another countdown but the former one still count. I would like to reset the first when i click again.

i tried to use a clear interval but i'm not sure to use it right.

function countdownto(target, time, callback) {
  var finish = new Date(time);
  var s = 1000,
    m = s * 60,
    h = m * 60,
    d = h * 24;

  (function timer() {
    var now = new Date();
    var dist = finish - now;

    var days = Math.floor(dist / d),
      hours = Math.floor((dist % d) / h),
      minutes = Math.floor((dist % h) / m),
      seconds = Math.floor((dist % m) / s);

    var timestring = minutes + ' minute(s) ' + seconds + ' seconde(s)';
    target.innerHTML = timestring

    if (dist > 0) {
      setTimeout(timer, 1000);
    } else {
      callback()
    }

  })()

}

var submitBtn = document.getElementById('yes');

submitBtn.addEventListener("click", function(e) {

  // countdown element
  var countdownel = document.getElementById('clockdiv');

  // 20 min
  var time = new Date()
  time.setSeconds(time.getSeconds() + 1200)


  // countdown function call
  countdownto(countdownel, time, function() {
    alert('end');
  })

})
<button id="yes"></button>

<div><span id="clockdiv">countdown
    </span></div>

Upvotes: 3

Views: 152

Answers (2)

R3tep
R3tep

Reputation: 12864

You need to clear the last timeout on each click.

To do that create a global variable and assign the timeout into. After you can use clearTimeout on each click

See live demo 

var timeout;

function countdownto(target, time, callback) {
  var finish = new Date(time);
  var s = 1000,
    m = s * 60,
    h = m * 60,
    d = h * 24;

  (function timer() {
    var now = new Date();
    var dist = finish - now;

    var days = Math.floor(dist / d),
      hours = Math.floor((dist % d) / h),
      minutes = Math.floor((dist % h) / m),
      seconds = Math.floor((dist % m) / s);

    var timestring = minutes + ' minute(s) ' + seconds + ' seconde(s)';
    target.innerHTML = timestring

    if (dist > 0) {
      timeout = setTimeout(timer, 1000);
    } else {
      callback()
    }

  })()

}

var submitBtn = document.getElementById('yes');

submitBtn.addEventListener("click", function(e) {
  clearTimeout(timeout)
  // countdown element
  var countdownel = document.getElementById('clockdiv');

  // 20 min
  var time = new Date()
  time.setSeconds(time.getSeconds() + 1200)


  // countdown function call
  countdownto(countdownel, time, function() {
    alert('end');
  })

})
<button id="yes">yes</button>

<div><span id="clockdiv">countdown
    </span></div>

Note : You are simulate setInterval with setTimeout. I think it's better to use directly setInterval in your case

Upvotes: 2

user2664889
user2664889

Reputation: 11

setTimeout(timer, 1000) returns internal timer ID. To stop the function you've passed in setTimeout() you have to stop the timer by calling clearTimeout(ID) function and pass internal timer ID you've got from setTimeout() Also I recommend you to use setInterval():

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

to stop myTimer function clear myVar

clearTimeout(myVar);

Upvotes: 1

Related Questions