Динамически ускоряющийся одометр в Javascript

Question

Я пытаюсь придумать яркий визуальный способ отображения числа. Количество, о котором идет речь, зависит от настроек, может варьироваться от 0 до 10 000 000 или около того. Поэтому изначально я думал, что создам одометр в Javascript, который просто добавит к окончательному числу. Я сделал это с помощью простой функции setInterval, но проблема заключается в том, что для чисел, превышающих несколько тысяч, даже с нулевой задержкой, это слишком долго waaaay. Как и следовало ожидать.

Что мне действительно нужно, это функция, которая может смотреть на общее число, о котором идет речь, и настроить, как на основе этого было добавлено одометр. То есть, это займет какое-то оценочное общее количество (скажем, 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); 
    } 
    .... 

, и я не знаю, что я что-то забыл, но это должно быть достаточно, чтобы получить это происходит.