Home/ Questions/Q 4116300
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:41:27+00:00

Im sure this has been asked 1000 times before, basically all I want to

  • 0

Im sure this has been asked 1000 times before, basically all I want to do is change the content of an element of the page to display a loading message while my other javascript code (quite resource intensive) completes. The problem is the message isnt displayed untill after the “other JS processing” has completed, thus defeating its purpose entirely. a simplified example…

<html>
<head>
    <title> crappity crapness </title>
    <script type="text/javascript">
        function showMessage(){
            document.getElementById("content").innerHTML = "please wait while we waste some time";
        }

        function wasteTime(){
            //alert("oh joy");
            pausecomp(3000);
            //alert("marvelous!");
        }

        function pausecomp(millis) 
        {
            var date = new Date();
            var curDate = null;

            do { curDate = new Date(); } 
            while(curDate-date < millis);
        } 

    </script>
</head>
<body>
    <div id="content">Blah</div>
    <br/>
    <a href="http://www.google.com" onclick="showMessage(); wasteTime();"> link </a>
</body>

if I uncomment the “oh Joy” alert, the text in the div gets updated Immediatly. how do I make it work without the alert?

I know I must be missing something simple.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It sounds like you’re coming up against the fact that Javascript is single-threaded, but browsers are not.

    Basically, you can’t have multiple pieces of Javascript running at once. However, the browser still has to do things outside of executing Javascript and proceeds to do so when it can. The problem is that whether modifying the DOM is synchronous (i.e. JS execution stops until it’s done) or asynchronous (JS execution continues) isn’t defined. Most browsers do the latter. But JS execution still has a quite high priority and a lot of DOM updates get deferred until the JS execution has to stop and wait. An alert box is an excellent example because it is waiting for user input.

    The way to do what you want to do is to advantage of setTimeout() which lets the current piece of JS finish, the browser can then finish updating the DOM, and then it can execute JS waiting to run on a timeout.

    • 0