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

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;
};

CodePudding user response：

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 (1 second 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, 1000, document.getElementById("blahblahblah"));

<output id="blahblahblah">0</output>