Question

所以我有这个计数器，它需要每60秒增加一个数字75。我在下面的代码做得很好但是由于四舍五入的数字比其他数字更长，并且有些数字被跳过。

我宁愿让它顺利/均匀地计数以获得相同的最终结果。我知道我需要以某种方式计算setInterval计时器编号，但我不知道该怎么做。

(function(){
    //Numbers
    var num = 0;
    var perMinute = 75;
    var perSecond = perMinute / 60;

    //Element selection
    var count = document.getElementById("count");

    function update(){

        //Add the per-second value to the total
        num += perSecond;

        //Display the count rounded without a decimal
        count.innerHTML = Math.round(num);
    }

    //Run the update function once every second
    setInterval(update, 1000);
})();

工作示例：http://jsfiddle.net/ChrisMBarr/9atym/1/

Answer 1

永远不要依赖Timeout或Interval来准确。相反，请保存“开始时间”并将其与当前时间进行比较。

(function() {
    var start = new Date().getTime(),
        perMinute = 75,
        perMS = perMinute/60000,
        count = document.getElementById('count');
    function update() {
        var elapsed = new Date().getTime()-start;
        count.innerHTML = Math.round(elapsed*perMS);
    }
    setInterval(update,1000);
})();

请注意，您可以调整1000以使计数器变得“平滑”（对于较大的perMinute值更重要）并且它将始终完美地工作，在分辨率的过冲范围内。

Answer 2

移动你的舍入似乎解决了这个问题（编辑：不，它没有。请参阅我在下面提供的更好修复的jsfiddle示例。）

(function(){
//Numbers
var num = 0;
var perMinute = 75;
var perSecond = perMinute / 60;

//Element selection
var count = document.getElementById("count");

function update(){

    //Add the per-second value to the total
    num += Math.round(perSecond);

    //Display the count rounded without a decimal
    count.innerHTML = num;
}

//Run the update function once every second
setInterval(update, 1000/perSecond);
})();

修改：正确的解决方法 - http://jsfiddle.net/4y2y9/1/

在一段时间内平滑地增加一个数字

2 个答案: