快进定时器答案

【问题标题】：Fast forward timer快进定时器
【发布时间】：2013-01-12 03:14:26
【问题描述】：

我在快进计时器时遇到问题。在这个体育场，这是非常基本的。我有一个添加数字的间隔。像这样：

setInterval(function () {
    //+1 second
    //Format output to 00:00
    //Handle minute update
}, 1000);

这很完美。计时器以正常速度运行。我想要做的是快进这个计时器。我想要一个计时器分钟来占用 1 秒。我试过了：

setInterval(function () {
    //+1 second
    //Format output to 00:00
    //Handle minute update
}, 15);

这有时有效，有时无效。有时它会在 01:02 而不是 01:00 停止。这可能是我缺乏数学知识，但我不知道。你会怎么做？我将每隔“计时器分钟”停止和启动计时器，因此间隔正确很重要。

编辑这是我希望它如何工作的小提琴：http://jsfiddle.net/tbleckert/pF4gs/

编辑 2 也许我应该在我停止计时器时调整时间？

编辑 3 大多数时候似乎 15 毫秒有效。但是有些东西不可靠，我认为最好的方法是调整时间。

【问题讨论】：

15 毫秒是一个真的短间隔...你确定要那么短吗？
呵呵我知道它很短，但它很好，因为你可以真正看到它是如何“快速转发”的。我想这样 1000/60 = 16.666。但是当我把它作为间隔时，它太快了，所以我选择了 15。

标签： javascript timer setinterval

【解决方案1】：

我认为您应该做的是将间隔存储在一个变量中，以便您可以清除它，然后以不同的延迟重新开始。

var delay = 1000; // JavaScript uses milliseconds, so 1000 = 1 second
var theTimer  = '';

function startTimer(){
  theTimer = setInterval(function () {
     // Do awesome stuff here
  }, delay);
}

startTimer();

现在当你想改变间隔，或者快进计时器，你所要做的就是清除当前的setInterval并重新定义它 -

clearInterval(theTimer); // stop and clear the current timer
delay = 500; // Crank it up to twice the speed! 0.5 seconds!
startTimer(); // start a new setInterval();

Here is a simple demo

【讨论】：

当然可以。我已经存储了间隔，并且我有不同的停止和启动功能以及快进功能。您的代码只会使其速度提高一倍。我希望我的计时器在一秒钟内从 0 变为 60。我也想显示大部分秒数。如果你明白我的意思，就像最后一分钟的曲棍球时钟一样。

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<script>
function myTimer(){
    this.startTime=0;
    this.intervalID=0;
    this.timePassed=0;
    this.multiplier=1;
    this.outputElement=null;
    this.start=function(){
        clearInterval(this.intervalID);
        this.timePassed=0;
        this.outputElement=document.getElementById("output");
        this.startTime=new Date();
        var me = this;
        this.intervalID=setInterval(function(){
            me.update(me);
        },100);
    }
    this.toTwoDigit=function(num){
        if(num<10){
            return "0"+num;
        }
        return new String(num);
    }
    this.toThreeDigit=function(num){
        if(num<10){
            return "00"+num;
        }
        if(num<100){
            return "0"+num;
        }
        return new String(num);
    }
    this.update=function(me){
        me.timePassed=me.timePassed+(100*me.multiplier);
        var seconds=Math.floor(me.timePassed/1000);
        var hours = Math.floor(seconds/3600);
        var minutes = seconds-(hours*3600);
        seconds = seconds%60;
        minutes=Math.floor(minutes/60);
        me.outputElement.innerHTML= me.toTwoDigit(hours)+":"
            +me.toTwoDigit(minutes)+":"
            +me.toTwoDigit(seconds)
            +":"+me.toThreeDigit(Math.floor(me.timePassed%1000));
    }
    this.speedup=function(){
        this.multiplier=this.multiplier*2;
    }
    this.slowDown=function(){
        this.multiplier=this.multiplier/2;
    }
    this.stop=function(){
        clearInterval(this.intervalID);
        this.update(this);
    }
}
var t = new myTimer();
</script>
</head>
<body onload="t.start();">
<input type="button" value="speed up" onclick="t.speedup()"></input>
<input type="button" value="slow down" onclick="t.slowDown()"></input>
<input type="button" value="stop" onclick="t.stop()"></input>
<input type="button" value="restart" onclick="t.start()"></input>
<input type="button" value="(re)start times 60" onclick="t.multiplier=60;t.start()"></input>
<div id="output"></div>
</body>
</html>

【讨论】：

您说：“这有时有效，有时无效。有时它会在 01:02 而不是 01:00 停止”但是您在代码中的哪个位置停止了计时器？我用计时器代码更新了我的答案，显示了如何实现它来更改添加时间值。如果你需要在一分钟后提出一个偶数，那么我也可以在那里实现它。

【解决方案3】：

好的，我将自己回答这个问题。我觉得我说得不够清楚。当我启动计时器时，超时同时开始，一秒钟后停止计时器。这就是问题所在，计时器停止时并不总是显示 01:00。

因此，最终的解决方案是每次停止时将秒数设置为 00，因为这一切都发生得如此之快，您不会注意到。

setTimeout(function () {
  clearInterval(interval);
  $('.clock').html(rMin.slice(-2) + ':00');
}, 1000);

检查我更新的小提琴： http://jsfiddle.net/tbleckert/pF4gs/2/

【讨论】：