javascript - 在设定时间内从零增加到数字

Question

我试图在一定的持续时间(1000 毫秒、5000 毫秒等)内从 0 增加到一个数字(可以是从 2000 到 12345600000 的任何数字)。我创建了以下内容:

http://jsfiddle.net/fmpeyton/c9u2sky8/

var counterElement = $(".lg-number");
var counterTotal = parseInt(counterElement.text()/*.replace(/,/g, "")*/);
var duration = 1000;
var animationInterval = duration/counterTotal;

counterElement.text("0");
var numberIncrementer = setInterval(function(){
    var currentCounterNumber = parseInt(counterElement.text()/*.replace(/,/g, "")*/);
    
    if (currentCounterNumber < counterTotal){
        currentCounterNumber += Math.ceil(counterTotal/duration);
    
        // convert number back to comma format
        // currentCounterNumber = addCommas(currentCounterNumber);
        
        counterElement.text(currentCounterNumber);
    } else {
        counterElement.text(counterTotal);
        clearInterval(numberIncrementer);
    }
    
    console.log("run incrementer");
}, animationInterval);

function addCommas(number){
    for (var i = number.length - 3; i > 0; i -= 3)
        number = number.slice(0, i) + ',' + number.slice(i);
    
    return number;
}

这有点有效，但它不尊重持续时间。 IE。如果您将号码从 1000 增加到 1000000000，它们到达目标号码所需的时间是不同的。

如何在特定时间范围内从零增加到一个数字？

Answer 1

正如 @Mouser 指出的，问题在于 animationInterval 不能太小(实际的最小阈值将根据浏览器和平台的不同而有所不同)。不要改变间隔，而是改变计数器的增量:

var counterElement = $(".lg-number");
var counterTotal = parseInt(counterElement.text()/*.replace(/,/g, "")*/);
var duration = 1000;
var animationInterval = 10;
var startTime = Date.now();

counterElement.text("0");
var numberIncrementer = setInterval(function(){
    var elapsed = Date.now() - startTime;
    var currentCounterNumber = Math.ceil(elapsed / duration * counterTotal);
    if (currentCounterNumber < counterTotal){
        counterElement.text(currentCounterNumber);
    } else {
        counterElement.text(counterTotal);
        clearInterval(numberIncrementer);
    }

    console.log("run incrementer");
}, animationInterval);