Счетчик быстрых чисел, использующий только JavaScript - PullRequest
Новая
       5

Счетчик быстрых чисел, использующий только JavaScript

1 голос
/ 11 января 2020

Метод setInterval (), как показано ниже, занимает много времени для больших чисел, таких как 7 000 000 (70 секунд) 

let startNum = 0;
let endNum = 7000000;    

function countIni() {
       var handle = setInterval( ()=> {
          if (startNum <= endNum) {
             var x = startNum.toLocaleString(undefined, {
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
             });
             $w('#number').text = x.toString();
             startNum++;
          } else {
             clearInterval(handle);
          }
       }, 0);
    }

Есть ли способ, которым счет от 0 до 7 000 000 или выше может быть выполнен в течение От 2 до 3 секунд. Примерно так: https://teamtrees.org/

Я использую Corvid, поэтому я могу использовать только функцию $ w ("# число"). Text для установки значения текста.

1 Ответ

3 голосов
/ 11 января 2020

Вам просто нужно сделать некоторые вычисления для дельты, чтобы увеличить число. Прямо сейчас следующее делает 33 мс, что составляет около 30 кадров в секунду анимации:

Обратите внимание, что нет гарантии для delay, переданного setInterval. Даже 0 означает каждый следующий цикл событий для setInterval (или следующий цикл событий для setTimeout), и на самом деле это не "немедленно". 

let startNum = 0,
  endNum = 7000000,
  nSecond = 2,
  resolutionMS = 33,
  deltaNum = (endNum - startNum) / (1000 / resolutionMS) / nSecond;

function countIni() {
  var handle = setInterval(() => {

    var x = startNum.toLocaleString(undefined, {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    });
    document.querySelector('#number').innerHTML = x.toString();
    
    // if already updated the endNum, stop
    if (startNum >= endNum) clearInterval(handle);
    
    startNum += deltaNum;
    startNum = Math.min(startNum, endNum);
  }, resolutionMS);
}

countIni();
<div id="number"></div>
...