Progress Bar for the loop

Progress Bar for the loop
0

#1

Hi,

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 ?

Regards


#2

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.


#3

Could you post the code you’re working on?


#4

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.


#5

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 ) --> https://goo.gl/LBqwQK

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