Question

I’ve got a function called compute() that does a bunch of computations and then updates the values of an HTML table, triggered by a click() event. This is not an ajax call, just several for loops.

What I’d like to do is provide a visual indicator that the computation is running. Something like modifying the opacity of the table. I thought that something like the following could work :

$("#mytable").css("opacity", "0.5");
compute();
$("#mytable").css("opacity", "1");

But when I use this code the opacity does not seem to be modified.

Any hint on how to do this ?

Many thanks in advance !

Answer 1

That’s because the UI is not updated between the modification of the opacity and the compute(); function. UI is updated once a while, not after every line of code (that would slow everything down).

You can use a timeout to bypass that: setTimeout(compute, 0);.

That way your UI get’s updated before running compute(). You do have to put the third line, where you modify the opacity back to 1, in that function because it will run before compute() is done.

$("#mytable").css("opacity", "0.5");
setTimeout(compute, 0);

function compute() {
    ...

    $("#mytable").css("opacity", "1");
}

It might look dirty at first, but it is a genuine way to make sure your UI is updated!