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)
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.