倒计时为零时效果不佳

Question

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

我使用 momentjs 和 countdownjs

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

解决方案：我将 setInterval(showCountdown, 1000) 更改为 showCountdown() 并且我的 JS 文件调用不在正确的位置（时刻和倒计时）。

Answer 1

您正在通过调用 setInterval 来执行此操作。您每秒都会产生一个新的倒计时，并且这些倒计时相互竞争以更新 html 元素。

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

Answer 2

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

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

倒计时为零时效果不佳

Countdown when is zero dont work very well

javascript

countdown

momentjs