Question

I am using javascript to complete a command which sometimes takes a long time to accomplish, but when I click the button, the button stays pushed and does not update the screen until the javascript execution is complete. I need to know how to continue updating the screen while executing the javascript, because I want to show a loader while executing the javascript.

Code: jsFiddle code

Answer 1

The image doesn’t show because the browser will ensue a redraw/repaint only after the current Javascript stack ends.

What you can do is showing the loader and using a setTimeout to call your heavy-processing function after the repaint has taken place.

Note that if your function executes synchronous actions such as a for loop 100000000 times as in your fiddle, your browser will be too busy processing it to animate a loading image (you’ll have a static image then).

onclick="show_loader(); setTimeout(fn, 100);"

Fiddle