如何让setTimeOut更快地运行计数器动画？

Question

我有一段计数器代码。我想像光速一样快地运行它，因为数字以数千为单位，现在动画看起来很傻而且很慢，请问有什么想法吗？或者也许是更好的方法？

const stat = document.querySelectorAll(".stats span");

export const startCounter = () => {
    stat.forEach(stat => {
        console.log("fore");
        
        let counter = 0;

        function updateCount() {            
            const traget = parseInt(stat.dataset.count);

            if(counter < traget) {
                console.log("target >");
                
                counter++;
                stat.innerText = counter;
                setTimeout(updateCount, 1);
            }
            
        else {
            console.log("> targ");
            
            stat.innerText = counter.toLocaleString();
        }
        }

        updateCount();

    });
}


startCounter();

Answer 1

由于没有理由更新 DOM 的速度比

requestAnimationFrame

触发的速度更快，因此您可以使用

requestAnimationFrame

的毫秒参数来确定计数 - 如下所示

const stats = [...document.querySelectorAll(".stats span")];

const startCounter = () => {
  let firstCount = 0;
  const maxTarget = Math.max(...(stats.map(stat => +stat.dataset.count)));
  function updateCount(ms) {
    const counter = (ms - firstCount) | 0;
  
    const max = stats.reduce((acc, stat) => {
      const target = parseInt(stat.dataset.count);
      const value = Math.min(target, counter);
      stat.innerText = value;
      return Math.max(target, acc)
    }, counter);
    if (max > counter) {
      requestAnimationFrame(updateCount);
    } else {
      console.log('done');
    }
  }
  requestAnimationFrame((ms) => {
    firstCount = ms;
    requestAnimationFrame(updateCount);
  });
};
startCounter();

<div class="stats"><span data-count=1969></span></div>
<div class="stats"><span data-count=3232></span></div>
<div class="stats"><span data-count=2876></span></div>
<div class="stats"><span data-count=1818></span></div>