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

Question

对于较大的数字，例如 7,000,000（70 秒），如下所示的 setInterval() 方法会花费大量时间

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函数来设置文本的值

Answer 1

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

注意there is no guarantee for the delay passed to setInterval。即使 0 也意味着 setInterval 的每个下一个事件周期（或 setTimeout 的下一个事件周期），并不是真正的 "immediately".

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>

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

Faster Number Counter Using Only JavaScript

javascript

velo