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

Javascript：重启倒计时器不起作用，因为我期望它

2 个答案: