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

它的功能如下：
+我设置了间隔，该间隔将每10秒重新启动一次count（） 。
+ count（）定义end_date-从现在起10秒的日期。
+然后count（）设置间隔，每1秒钟重新启动一次。
+每1秒seconds_left变量会根据current_date相对于end_date的更改方式进行更改。
+一旦seconds_left变为0，则从第1步开始触发setInterval并重新开始count（） 。

我执行错误的步骤是哪一步？ 我会误解setInterval（）的功能吗？ 这是我的JsFiddle： http : //jsfiddle.net/sy5stjun/ 。

Answer 1

这里发生了一些事情。 您并不确定要在循环内设置另一个间隔的原因，但是有很多简单的方法可以完成您要执行的操作。 另一种方法如下：

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/

Answer 2

我的猜测是，每个调用都在其自己的新对象中，并且您会在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);

在上面的代码中，我将小型计时器更新为500毫秒（而不是1000毫秒），因为它与1000的系统时钟不完全一致，并且您会看到数字的跳跃。

如果准确的时间安排不是100％重要的，则可以使用以下较短的方法：

var t = 10;

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