CODEWITHSUNDEEP
javascriptjquery
zevrap21
zevrap21

Reputation: 33

stop countdown timer at 0 once target time is reached

I setup a countdown timer using the following code, but once the target time is reached it does not stop counting down. I would appreciate any help or guidance in what i can do to stop at 0 once target is hit. 

// set the date we're counting down to
var target_date = new Date("Nov 13, 2015 16:51:00").getTime();

// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second



$('#countdown').each(function() {
    setInterval(function () {

        // find the amount of "seconds" between now and target

        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;


        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        countdown.innerHTML = '<div class="days">' + '<span class="number">' + ((days < 10) ? '0' : '') +  days + '</span>' + '<br /><span class="text">days</span></div>' + '<div class="hours">' + '<span class="number">' + ((hours < 10) ? '0' : '') + hours + '</span>' + '<br /><span class="text">hrs</span></div>' + '<div class="minutes">' + '<span class="number">' + ((minutes < 10) ? '0' : '') + minutes + '</span>' + '<br /><span class="text">min</span></div>' + '<div class="seconds">' + '<span class="number">' + ((seconds < 10) ? '0' : '') + seconds + '</span>' + '<br /><span class="text">sec</span></div>';   
    }, 1000);


});

Upvotes: 3

Views: 350

Answers (3)

sudheer
sudheer

Reputation: 165

I don't see any clearInterval method in your code.

timerfunction = function() {
    //LOGIC
    if (seconds_left < 0) {
        clearInterval(timerId);
    }
}

var timerId = setInterval(timerfunction, 1000);

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Clear the interval once the target is reached.

var iv = setInterval(function () {
  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  if (seconds_left < 0)
  {
    clearInterval(iv);
    return;
  }

  // ...
}, 1000);


var target_date = new Date((new Date()).getTime() + 6000);

// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second

var iv = setInterval(function() {

  // find the amount of "seconds" between now and target

  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  if (seconds_left < 0) {
    clearInterval(iv);
    return;
  }

  // do some time calculations
  days = parseInt(seconds_left / 86400);
  seconds_left = seconds_left % 86400;

  hours = parseInt(seconds_left / 3600);
  seconds_left = seconds_left % 3600;

  minutes = parseInt(seconds_left / 60);
  seconds = parseInt(seconds_left % 60);

  // format countdown string + set tag value
  countdown.innerHTML = '<div class="days">' + '<span class="number">' + ((days < 10) ? '0' : '') + days + '</span>' + '<br /><span class="text">days</span></div>' + '<div class="hours">' + '<span class="number">' + ((hours < 10) ? '0' : '') + hours + '</span>' + '<br /><span class="text">hrs</span></div>' + '<div class="minutes">' + '<span class="number">' + ((minutes < 10) ? '0' : '') + minutes + '</span>' + '<br /><span class="text">min</span></div>' + '<div class="seconds">' + '<span class="number">' + ((seconds < 10) ? '0' : '') + seconds + '</span>' + '<br /><span class="text">sec</span></div>';
}, 1000);
<div id="countdown"></div>

Upvotes: 4

David Rissato Cruz
David Rissato Cruz

Reputation: 3637

You don't need a lot of your code to reach your objectives. You can get rid of "each" method, for example.

To stop a timer, you need to hold a reference to it and use "clearInterval" when condition is met.

var myTimer = setInterval( function() {
    /* all your logic here */
    if (hasReachedZero) {
        clearInterval(myTimer);
    }
}

Upvotes: 0

Related Questions