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

定义

后

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

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

Answer 2

您需要根据自上次迭代后的时间长度计算当前数量。我在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);
}

在Javascript中动态加速里程表

2 个答案: