stop countdown timer at 0 once target time is reached

Question

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);


}); 

Answer 1

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>