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

Question

I am trying to make a counter that counts to big numbers such as 6 billion (like google's random number generator) but the browser freezes.

var counter = document.querySelector("#blahblahblah");
var nb = 0;
var ne = 6_000_000_000;
for (;nb<=ne;nb++) {
counter.innerHTML = nb;
};

Answer 1

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>