倒数为零时效果不佳

Question

我的网络中存在一个倒数计时器，并且工作得很好，但是当我的倒数计时器达到零时，它会同时显示两个值。如果我刷新网页，它会修复。我不明白为什么。

我使用momentjs和countdownjs

Show here运作方式

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

Answer 1

您正在通过调用setInterval执行此操作。您每秒产生一个新的倒数，而这些倒数正在相互竞争以更新该html元素。

将其更改为仅调用showCountdown()而不是设置间隔部分。

Answer 2

您可以按照Countdown.js clearInterval()的建议使用doc来纠正此问题：

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

window.clearInterval(counter);  // <-- clear the countdown interval