setTimeout counter renders page after script

Hi guys,
I’m trying to create a simple timer here, but I ran into a problem.
I render the page with a script changing innerHTML, but the innerHTML change only happens after the whole function has finished processing, including the scripts that come after the innerHTML change.
It’s better to demonstrate, so I created a jsfiddle:
https://jsfiddle.net/tqyzvbdu/
I tried to change the position of the display script, and I tried to use callback functions (probably incorrectly), but nothing works.
Can someone please explain why this is happening, and how to fix it?

It’s the default browser behavior (it’ll work fine on Firefox), that’s due to dom rendering and javascript working independently, but I can’t give you more details.

You can fix it by setting a timeout for your alert, even to 1ms.