CSS transitions blocked by JavaScript

Question

I have been trying to create a loading bar during a very intense JavaScript period where some rather heavy 3D arrays are created and populated. This boot panel should remain blank until the user clicks a button.

Freezing occurs regardless of whether I -webkit-transition (this application can be chrome-exclusive, a cross browser is not needed in my case).

In search of simplicity, I built my bar like this ...

 <div id="loader"> <div id="thumb"> </div> </div> 

... and then tried to increase this bar at different stages of my main for loop:

 for(i = 0; i < 5 ; i++){ document.getElementById('thumb').style.width = i*25 + '%'; //More Code } 

The problem is that everything freezes until JavaScript ends. I found a similar question about stack overflow, Using CSS animations when calculating javascript , as well as in the comments found and reviewed, and / or tried the following:

• Web workers

  Do not think that this will work, as my script fills the array with objects and constructors containing functions that according to this site will not work

• JQuery

  Not an option, I can’t use external libraries in my application - in any case, importing an entire library just for the loading bar seems kind of redundant ...

• Keyframes

  It was promising, and I tried, but in the end it also freezes, so no joy

• timeOut() s

  Thinking about it, but since the loading bar dot is a reduction in frustration, increasing the latency seems counterproductive

I would be glad if at this stage there was any increase in the bar, even if it was not smooth! I'm sure this is a problem that has struck me more than anyone, maybe someone has an interesting solution?

PS: I am posting this as a new question, and am not adding to the question, as I am specifically looking for help with JavaScript (not jQuery) and would prefer it if I could get it using the transition (! = Animation) in width.

Answer 1

Some people have already mentioned that you should use timeouts. To the appropriate approach, bc, it will make browser time “breathe” and make your intermediate task an intermediate task.

You must split your code asynchronously. Let's say you have something like this:

 function doAllTheWork() { for(var i = 0; i < reallyBigNumberOfIterations; i++) { processorIntensiveTask(i); } } 

Then you need to turn it into something like this:

 var i = 0; function doSomeWork() { var startTime = Date.now(); while(i < reallyBigNumberOfIterations && (Date.now() - startTime) < 30) { processorIntensiveTask(i); i++; } if(i < reallyBigNumberOfIterations) { // Here you update the progress bar incrementBar(i / reallyBigNumberOfIterations); // Schedule a timeout to continue working on the heavy task setTimeout(doSomeWork, 50); } else { taskFinished(); } } function incrementBar(fraction) { console.log(Math.round(fraction * 100) + ' percent done'); } function taskFinished() { console.log('Done!'); } doSomeWork(); 

Note the expression (Date.now() - startTime) < 30 . This means that the cycle will work the same as in the interval of 30 milliseconds. You can make this number larger, but something over 100 ms (essentially 10 frames per second) will begin to feel lethargic from the user's point of view.

It is true that the general task will take a little longer using this approach, unlike the synchronous version. However, according to user experience, an indication that something is happening is better than waiting indefinitely until nothing happens, even if the last wait time is shorter.

Answer 2

Have you tried it even easier and made a function, say:

Pseudo:

 Function increment_bar(amount = 10) { document.getElementById('thumb').style.width = i*amount + '%'; } 

Then, wherever you do your processing, just call this function every x seconds or whenever you click on a certain point in the processing (say, 10-20% completion?)

Pseudo:

 { Doing_work_here; increment_bar(25); LOOP }