CODEWITHSUNDEEP
javascriptjqueryasynchronous
njr101
njr101

Reputation: 9619

Synchronous / asynchronous nature of browser rendering and javascript execution

I have some processing that is going to take a few seconds so I want to add a visual indicator while it is in progress.

.processing
{
  background-color: #ff0000;
}

<div id="mydiv">
  Processing
</div>

Script:

$("#mydiv").addClass("processing");
// Do some long running processing
$("#mydiv").removeClass("processing");

I naively thought that the class would be applied to the div and the UI would be updated. However, running this in the browser (in Firefox at least) the div is never highlighted. Can someone explain to me why my my div never gets highlighted? The class is added, the processing takes place and then the class is removed; the UI is not updated in between and the user never sees the red background.

I know JS is single-threaded but I'd always presumed the browser rendering would run synchronously as and when the DOM is updated. Is my assumption incorrect?

And more importantly, what is the recommended way to achieve this effect? Do I have to result to using setTimeout to make the slow processing asynchronous and work with a callback? There must be a better way as I really don't have any need for async behaviour here; I just want the UI to refresh.

EDIT:

JSFiddle: http://jsfiddle.net/SE8wD/5/

(Note, you may need to tweak the number of loop iterations to give you a reasonable delay on your own PC)

Upvotes: 7

Views: 2767

Answers (4)

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

Force a redraw. Alternatively, use Soren's code because processing on the UI thread sounds bad...

Upvotes: 0

Bergi
Bergi

Reputation: 664434

A browser is quite free about when to repaint and when to reflow. Different engines will show different behavior. For further reading, see When does reflow happen in a DOM environment?. In your example, the browser sees you adding a class and removing it directly after that, so he might not do anything visible.

To avoid that, you may apply a force-redraw-hack, or make your computation asynchronous with WebWorkers or setTimeout or something.

Upvotes: 0

Soren
Soren

Reputation: 14688

You probably should put the processing out in a seperate event, like this;

$("#mydiv").addClass("processing");
setTimeout(function(){
   // This runs as a seperate event after
   // Do some long running processing
   $("#mydiv").removeClass("processing");
},1);

That way the browser should redraw the screen with the processing, while the long running step will kick off as a seperate event, and remove the processing message when done.

Upvotes: 2

Luca Rainone
Luca Rainone

Reputation: 16458

I not recommend to freeze browser for a weight script. In this case I prefer to change the code for not freeze browser and DOM. If in your code there is some loop, you can call a function with a delay (using setInterval) and store some status variable somewhere. For example:

for(var i=0; i<1000000; i++) {
    // do something
}

Can be:

var i = 0;
var intervalID;
var _f = function() {
    // do something
    i++;
    if(i==1000000) clearInterval(intervalID);
}
intervalID  = setInterval(_f,1);

Or something of similar and more optimized. Your code will be a little bit more complex, and slower.. . but so you prevent browser freeze and you can make an advanced preload status bar.

Upvotes: 1

Related Questions