使用settimeout()时JavaScript倒数计时器问题

Question

倒数计时器不加载 - 仅在页面刷新后。

我已经在codepen.io等上测试了代码，尽管在网站上托管时，倒计时不会出现，仅在进行刷新后才出现。

当我使用 setInterval()时，它可以正常工作，但是自从倒计时以来，我只想更新一次倒计时，因此使用setTimeout()。

// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
// Update the count down every 1 second
var x = setTimeout(function() {
    // Get date
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + " days left	";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearTimeout(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 300);

完整代码：https：//codepen.io/anon/pen/vqzmdg

Answer 1

您可以创建一个data-attribute，即：updateCountdown。那将是仅更新倒数一次的标志。

// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
  // Get date
  var now = new Date().getTime();
  // Find the distance between now an the count down date
  var distance = countDownDate - now;
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var demo = document.getElementById("demo");
  if (!demo.dataset.updateCountdown) {
    console.log('Update countdown.');
    demo.dataset.updateCountdown = false;
       
    // Output the result in an element with id="demo"
    demo.innerHTML = days + " days left	";
  }
  console.log(x)
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 2000);

<span id='demo'></span>

看吗？现在它仅更新一次。

资源

• HTMLElement.dataset