Javascript：重新启动倒数计时器无法按我的预期工作

Question

我正在制作一个倒计时计时器，应该每10秒重置并重新开始。这是我现在写出来的代码:

function count(){
    var end_date = new Date().getTime()+10*1000;
    setInterval(function(){
      var current_date = new Date().getTime();
      var seconds_left = parseInt((end_date - current_date) / 1000);
      document.getElementById("countdown").innerHTML = seconds_left + " seconds ";
    }, 1000);
}
setInterval(function(){count()}, 10*1000);

它的功能应该如下:
+ I设置间隔，将重新启动count()每10秒。+ count()定义end_date -从现在算起10秒后的日期。+ then count()设置每1秒重启一次的间隔。
+每1秒seconds_left变量根据current_date相对于end_date的变化而改变。
+当seconds_left变为0时，setInterval从步骤1触发并重新开始count()。

我执行错了哪一步?我是否误解了setInterval()的功能?这是我的JsFiddle: http://jsfiddle.net/sy5stjun/.

Answer 1

我的猜测是，每个调用都在它自己的新对象中，并且你每10秒就会得到它自己的多个实例。

在这里使用你的方法使用日期对象是一个可能的重写:

var tmr = null;
var time;
function bigInterval() {
    clearInterval(tmr);
    time = (new Date()).valueOf() + (10 * 1000);
    smallInterval();
    tmr = setInterval(smallInterval, 500);
}
function smallInterval() {
    var cur = (new Date()).valueOf();
    var seconds_left = parseInt((time - cur) / 1000);
    document.getElementById("countdown").innerHTML = seconds_left + " seconds";
}
bigInterval();
setInterval(bigInterval, 10*1000);

在上面的代码中，我将小计时器更新为500ms而不是1000ms，因为它不会与系统时钟在1000时完全对齐，并且您可以看到数字的跳跃。

如果精确的时间不是100%重要，那么这里有一个更短的方法:

var t = 10;
setInterval(function() {
    document.getElementById("countdown").innerHTML = t + " seconds";
    t--;
    if (t <= 0) {
        t = 10;
    }
}, 1000);

Answer 2

这里有一些事情正在发生。你不知道为什么你必须在循环中设置另一个间隔，但有很多更简单的方法可以实现你的目标。另一种方法如下:

HTML:

<!-- string concatenation is expensive in any language. 
     Only update what has to change to optimize -->
<h1 id='countdown'><span id="ct"></span> seconds </h1>

JS:

// For one thing, grabbing a new reference to the 
// dom object each interval is wasteful, and could interfere with
// timing, so get it outside your timer, and store it in a var scoped
// appropriately.
var ct = document.getElementById("ct");
// set your start
var ctStart = 10;
// set your counter to the start
var ctDown = ctStart;
var count = function() {
    // decrement your counter
    ctDown = ctDown - 1;
    // update the DOM
    ct.innerHTML = ctDown;
    // if you get to 0, reset your counter
    if(ctDown == 0) { ctDown = ctStart; }
};
// save a reference to the interval, in case you need to cancel it
// Also, you only need to include a reference to the function you're
// trying to call, here. You don't need to wrap it in an anonymous function
var timer = window.setInterval(count, 1000);

我的jsFiddle可用于修补，在这里:http://jsfiddle.net/21d7rf6s/