仅使用 JavaScript 更快的数字计数器答案

【问题标题】：Faster Number Counter Using Only JavaScript仅使用 JavaScript 更快的数字计数器
【发布时间】：2020-01-11 19:11:49
【问题描述】：

下面的 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);
    }

有没有一种方法可以在 2 到 3 秒内完成从 0 到 7,000,000 或更高的计数。像这样的东西：https://teamtrees.org/

我使用的是 Corvid，所以我只能使用 $w("#number").text 函数来设置文本的值。

【问题讨论】：

标签： javascript velo

【解决方案1】：

您只需对增量进行一些计算以增加数字。现在下面的动画是 33 毫秒，大约是每秒 30 帧的动画：

请注意there is no guarantee for the delay passed to 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();

&lt;div id="number"&gt;&lt;/div&gt;

【讨论】：