Javascript is single threaded.
So despite when you make DOM changes using javascript, it will not update the display until the current JavaScript thread reaches the end and exits.
You have two possible approaches.
Fast Interval
Each step of each task/calculation takes place in a setInterval call. This mean the Javascript thread frequently exits allowing the dom to updated. This will make your calculations take longer.
Use a Web Worker
A WebWorker is a fairly new browser feature that allows you to load a Javascript file into a background thread. The background thread can then report progress updates to the main JS thread. The main JS thread can then update the DOM.
http://ejohn.org/blog/web-workers/[
^]
It depends on the level of browser compatibility you required. If legacy IE support is required I'd pick the fast interval approach. If it doesn't matter then the WebWorker.
--- Update ---
The issue based on your fiddle is that you're using a sleep method. This locks the Javascript thread stopping it from updating the UI.
I've seperated the Start Logging from the End Logging and implemented a setTimeout to establish your desired wait period of three seconds.
Please see my update to your fiddle:
http://jsfiddle.net/da8qztym/1/[
^]
Submit an article or tip