FlipClock .getTime() 不起作用？不更新 return 值

Question

我问过类似的问题，但没有收到。所以我会重新措辞。为什么 flipClock 函数 getTime() return 不是每次钟面变化时的值？当我将其输出到控制台时，该值始终保持在 10。它从不倒计时。然而，时钟工作得很好。如何获取时钟的当前时间？

var clock;

  // Instantiate a counter
  clock = new FlipClock($('.clock'), 10, {
    clockFace: 'MinuteCounter',
    autoStart: false,
    countdown: true
  });

if(clock.getTime() == 0){
   //Redirect to another page
   window.location.href = "example.html";
}else{
 console.log("This is the time now" + getTime());
}

Answer 1

如果我误解了你的问题，请原谅我。如果这个答案离题和居高临下，我深表歉意。

您提供的代码只会执行一次。创建时钟后，您立即调用 clock.getTime()。在那一刻，结果将是 10。因此，您的重定向代码将不会执行（因为结果不等于 0），您将立即进入 else 块内的代码。该代码会将时钟的当前时间注销到控制台（由于代码执行得太快，它仍然是 10）。

为了观察时钟倒计时，您需要反复调用clock.getTime()。您应该阅读轮询的概念。您可能会发现 setInterval 有用（参见 https://alligator.io/js/settimeout-setinterval/）。

Answer 2

因为调用一次，需要绑定interval事件。在回调函数中创建它

var clock = new FlipClock($('.clock'), 10, {
  clockFace: 'MinuteCounter',
  autoStart: true,
  countdown: true,
  callbacks: {
    interval: function() {
      var time = this.factory.getTime().time;
      console.clear()
      console.log("Countdown now: " + time);
      if (time == 0) {
        alert('Countdown finished!');
      }
    }
  }
});

.clock{margin-top:30px}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>


<div class="clock"></div>