How to make JavaScript write result over time (not instantly)?

I have a program, which writes a lots if results. For example, this:

const a = prompt();
for(let i = 1; i < a; i ++) {
  console.log(i);
}

(not an actual code)
So when you type a big number, there are a ton of answers waiting to be put in console. So, when it reaches some point, built-in browser compiler (Opera GX) just stops working. I need some way to write these numbers immediately after calculating, hopefully, without wasting time. How can I do that? (just for you to know, my actual code puts results in “div” element)

Answer

JavaScript is single-threaded. This means while your loop is running, events can’t be handled and the page doesn’t respond. You could use “recursive” setTimeout. This will break one long-running code into many small snippets managed by the event loop.

const a = prompt();
const container = document.getElementById('container');
const f = (() => {
  let i = 0;
  return () => {
    for (let j = 0; j < 1e9; ++j) {} // simulates long calculation 
    ++i;
    console.log(i);
    container.innerText += ' ' + i;
    if (i < a) setTimeout(f, 0);
  };
})();
setTimeout(f, 0);

<div id="container"></div>

It’s not a real recursive call, and it won’t create a large call stack. setTimeout(f, 0) pushes an event into the event loop, that is almost immediately removed and handled.

I only used the closure to avoid a global counter i. A simpler, but less clean version is

const a = prompt();
const container = document.getElementById('container');
let i = 0;
function f() {
  for (let j = 0; j < 1e9; ++j) {} // simulates long calculation 
  ++i;
  console.log(i);
  container.innerText += ' ' + i;
  if (i < a) setTimeout(f, 0);
};
setTimeout(f, 0);

<div id="container"></div>

Remember, that the page is still non-responsive during the loops (long calculation), but now you have many shorter loops instead of one long-running loop and events are handled between two loops.