Question

I have a JS routine (triggered by the user) that can take some time to complete. While the routine is running, I want to show a progress overlay on screen. Here’s the code that calls the routine (this is called in response to a click event):

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
}

The class toggle triggers a change in opacity and visibility (animated with a transition).

The class changes themselves are working fine; the first is executed before the slow routine and the second is executed after everything else.

The issue is that the visual appearance of #progressOverlay doesn’t change until after myBigRoutine() finishes.
The result is that the progress overlay flashes on screen for a split second and then is immediately hidden again (all with no animation)

Is there a way to force the visual update/repaint to occur before (or, even better, in parallel with) the big JavaScript routine?

Answer 1

You can bind an event to animation finish. So, when animation finishes, only then your code will execute,

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');

}

$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
});

I hope, this is what you need 🙂