javascript - Javascript 动态加速里程表

Question

我正在尝试想出一种引人注目的视觉方式来显示数字。根据设置，相关数字可能在 0 到 10,000,000 之间变化。所以最初我想用 Javascript 设置一个里程表，将其加起来得出最终数字。我用一个简单的 setInterval 函数做到了这一点，但问题是，对于大于几千左右的数字，即使延迟为零，它也会花费太长的时间。正如人们所预料的那样。

我真正想要的是一个可以查看相关总数并根据该总数调整里程表添加方式的功能。也就是说，需要某种估计的总数(例如 10 秒)，然后计算出每个间隔需要添加多少才能在这段时间内完成。它还会在某种程度上使用随机数，因此它不仅仅是每秒“大量”添加一百万。

这是原始代码，非常明显和简单:

var totalNumber;
var currentNumber;
var changeInterval = 1; //even 0 is too slow

//later in a function scope 

        interval = setInterval(function() {
                updateNumber();
            }, changeInterval);

//later
function updateNumber() {
    currentNumber++;
    if(currentNumber>=totalNumber) {
        clearInterval(interval);
    }
    document.getElementById("theNumber").innerHTML = currentNumber;
}

我无法概念化一种非蹩脚的方法来实现这一点。有什么想法吗？

Answer 1

您需要根据自上次迭代以来已经过去的时间来计算当前数字。我在jsfiddle上做了一个简单的例子:

http://jsfiddle.net/hwFJm/

var number = 452131,
    delay = 20,
    totalTime = 10000;

$(function() {
    count(number, delay, totalTime, $('#counter'));    
});

function count(total, delay, totalTime, element, decimals) {
    var number = 0,
        startTime = newTime = new Date();

    decimals = decimals || 2;

    element.text(number);

    var interval = setInterval(function() {
        newTime = new Date();
        number = Math.min(total * ((newTime - startTime) / totalTime), total);

        number = Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);

        element.text(number);
        if(number >= total) {
            clearInterval(interval);
        }
    }, delay);
}