在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);
}

Answer 2

一旦你定义了

var totalTime = 10000; // 10 seconds

您知道您需要的更新次数是：

var numberOfTicks = totalTime/changeInterval;

您需要在每个间隔增加currentNumber的数量为：

var increment = totalNumber/numberOfTicks

只要你从零开始。为了避免舍入问题，而不是增加，请使用计数器并每次设置该值：

function updateNumber() {
    updateCounter++;
    currentNumber = increment * updateCounter;
    if(currentNumber>=totalNumber) {
        clearInterval(interval);
    }
    ....

我不知道我忘了什么，但这应该足以让它继续下去。