Question

在我们的应用程序中，我们需要一个强大的倒数计时器。当计时器倒计时到零时，我们将用户移至下一页。

这里有很多关于在JavaScript中制作倒数计时器的问题。我已经淘汰了很多，查看了很多代码示例，尝试了很多插件，并且所有这些插件都失败了：如果你调整计算机系统时钟，所有这些计时器都搞砸了（获得时间，浪费时间，或只是冻结）。原因是大多数逻辑基于保存一些初始启动时间，然后以某个间隔（通过setTimeout或setInterval）获取当前时间并在它与开始时间之间进行差异。调整系统时间时，“当前”时间可以是开始时间之前的一小时或几天，也可以是数小时或数天之后。

所以，我已经提出以下代码来尝试处理这些系统更改方案。我做的主要是检查我的开始和当前之间的“差异”是否为负（或大于大约一小时来处理自动夏令时调整），只是使用刻度间隔作为近似值。此外，将开始时间重置为每个滴答的当前时间，以使经过的时间是差异之间的时间之和，而不仅仅是初始开始时间和当前时间之间的差异。有人看到这种方法有任何缺陷吗？

var timeLeft = 60000, // time left in ms, 1 minute for this example
    startTime, 
    totalElapsedTime = 0,
    TICK_INTERVAL = 500; // the setTimeout interval


var timerTick = function () {

    var now = new Date(),
        elapsedTime = now.getTime() - startTime.getTime();

    // if the elapsed time was positive and less than approximately an hour, then add the elapsed time to the total
    // otherwise, add the TICK_INTERVAL, which we know is the theoretical minimum between timerTick() calls

    totalElapsedTime = (elapsedTime > 0 && elapsedTime < 3590000) ? totalElapsedTime + elapsedTime : totalElapsedTime + TICK_INTERVAL;

    // reset start time 
    startTime = now;

    // there is time left, so set up another tick
    if (totalElapsedTime < timeLeft) {

        // update the html that is displaying remaining time

        setTimeout(timerTick, TICK_INTERVAL);          

    }
    else {

        // time ran out, so do whatever you do when it runs out            

    }
}


// start the timer
startTime = new Date();
setTimeout(timerTick, TICK_INTERVAL);

Answer 1

为什么以下内容对您不起作用？

var timeleft = 60000,
    tick = 1000,
    intervalID = window.setInterval(function () {
        timeleft = timeleft - tick;
        if (timeleft <= 0) {
            // clear the interval
            clearInterval(intervalID);

            // do something
        }
    }, tick);

<强>更新

使用setTimeout（这会漂移，但除非你将它用于动画，否则可能没问题）：

var timeleft = 60000,
    tick = 1000;

window.setTimeout(function timerFn() {
    timeleft = timeleft - tick;
    if (timeleft > 0) {
        // set the next timeout
        setTimeout(timerFn, tick);
    } else {
        // do something
    }
}, tick);

一个更好的（希望）JavaScript倒数计时器

1 个答案: