Countdown when is zero dont work very well

Question

I have a countdown in my web and work very well but when my countdown reaches zero it shows two values ​​at the same time. If I refresh webpage it fix. I dont understand why.

I use momentjs and countdownjs

Show here how it work

function showCountdown(hasta) {

  moment.locale('es')
  var hora = moment()
  var first = moment('09:00', 'HH:mm')
  var second = moment('12:00', 'HH:mm')
  var third = moment('15:00', 'HH:mm')
  var fourth = moment('18:00', 'HH:mm')
  var fiveth = moment('21:00', 'HH:mm')
  var sixth = moment('23:59', 'HH:mm')

  switch (true) {
    case hora.isBefore(first):
      var hasta = first
      break;
    case hora.isBetween(first,second):
      var hasta = second
      break;
    case hora.isBetween(second,third):
      var hasta = third
      break;
    case hora.isBetween(third,fourth):
      var hasta = fourth
      break;
    case hora.isBetween(fourth,fiveth):
      var hasta = fiveth
      break;
    case hora.isBetween(fiveth,sixth):
      var hasta = sixth
      break;
    case hora.isAfter(sixth):
      var hasta = first.add(1,'d')
      break;
  }

  function f(n) { return n<10 ? '0'+n : n; }

  countdown(hasta, function(ts) {
      var countdownMatch = f(ts.hours||'0')+':'+f(ts.minutes)+':'+f(ts.seconds).toString();
      $('.countdownMatch').html(countdownMatch)
    }, countdown.HOURS|countdown.MINUTES|countdown.SECONDS);

}
setInterval(showCountdown, 1000);

SOLUTION: I change setInterval(showCountdown, 1000) to showCountdown() and my JS files call aren't in a correct place (moment and countdown).

Answer 1

You are executing this by calling setInterval. You are spawning a new countdown every second, and those count downs are competing with eachother to update that html element.

Change it to simply call showCountdown() instead of with the set interval part.