Home/ Questions/Q 6629063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:12:24+00:00

In Javascript, I want to create a handler for a mouse click. Then, I

  • 0

In Javascript, I want to create a handler for a mouse click. Then, I want to be able to “busy-wait” for a few seconds before running the next line of code.* But in the “busy-wait”, I want to still be able to process the mouse click events.

Why will the following code run the while loop entirely and THEN activate the handler? (as in, why doesn’t the mouse click handler event ever get called in the middle of the busy-wait while loop?)

<html>
    <body>
        <p id="debugMessageElement"> </p>

        <script type="text/javascript">
            canvas=document.createElement("canvas")
            var ctx = canvas.getContext("2d");
            canvas.width = 840;
            canvas.height = 560;
            document.body.appendChild(canvas);

            var mouse_input = function(event){
                document.getElementById("debugMessageElement").innerHTML = event.pageX + ", " + event.pageY + "<br />"
            }

            canvas.onmousedown = mouse_input;

            timeallowed = 3
            start = Date.now()
            while(true){
                now = Date.now()
                delta = now - start
                if(delta >= timeallowed*1000){
                    document.write("" + timeallowed + " seconds has passed")
                    break;
                }
            }
        </script>
    </body>
</html>

*The reason that I’m designing my code like the above is ultimately because I want to do something like this:

for(p in person){
    for(t in person[p].shirts){
        busy_wait_5_seconds() //However, I want to process mouse clicks in these five seconds.
        //THEN move on to the next shirt... After five seconds...
    }
}

P.S. if you’re going to test this code, please note that I used the HTML5 canvas, so some browsers might not work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JavaScript has only a single thread. If you do a while-true loop, it will essentially freeze the entire page until the code stops running.

    To wait a certain time before executing some code, you should use setTimeout. The final solution to your problem is a little more complicated than that though – you would need a recursive setTimeout to process the loop.

    edit: Here’s something I quickly whipped up which should solve your nested loop with waiting in the sub loop: http://jsfiddle.net/t4gsR/ – It may go a bit over your head if you’re still a beginner though, but press “run” on the top menu and see it work 🙂

    • 0