[Solved] Count to numbers above a billion in a few seconds without browser freezing

by


The best thing you can do is use requestAnimationFrame. This represents the fastest rate that you can update the DOM.

Use the callback to update your element text to the number proportional to the time allowed; 3 seconds (a few) from your question title

const runCounter = (num, timeout, el) => {
  let start;

  const step = (ts) => {
    if (!start) {
      start = ts; // record the first iteration timestamp
    }

    const progress = (ts - start) / timeout; // how far into the time span

    if (progress < 1) {
      el.textContent = Math.floor(num * progress);
      requestAnimationFrame(step); // request the next frame
    } else {
      el.textContent = num; // finish
    }
  };

  requestAnimationFrame(step);
};

runCounter(6_000_000_000, 3000, document.getElementById("blahblahblah"));
<output id="blahblahblah">0</output>

solved Count to numbers above a billion in a few seconds without browser freezing