Progress Bar for the loop


This problem concerns JavaScript.
I noticed that during execution of for() { … } browser is lock and everything during execution of the loop will be seen in the browser after it finishes , in other words until last “i”. (you can check this trying to click on the right button of the mouse --> zero activity )

What I wanted to do is a progress bar informing about the state, let say which “i” is now processing. but unfortunately what I said above it can’t be done in the loop.

I was wondering if there is any method that brakes the loop for a while just to show user progress and then come back to the loop ?


I’m not sure why this wouldn’t be possible. You’d need a library to set up a progress bar (Bootstrap has one) and on each loop, you’d update the value.

Could you post the code you’re working on?

You shouldn’t be locking up the main thread for long enough that a progress bar is necessary. If code has to be run on the client that takes that long to run, consider using a web worker.

In any case, it’s not possible to do that for a for loop on the main thread, because for loops are synchronous, and the DOM will only update after the end of the loop.

It is example I have been working on it shows meteorites on the map (codepen stops loop automatically after some time so quantity of meteors are limited ) -->

Thanks for answer yes I noticed that everything is shown after the loop is finished doing this simple site. I haven’t used web workers before so need to read this guide.

I asked about break the loop because I remember that in some other languages there is such possibility unfortunately I am not an expert in JS ;).