StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO'onmousedown' not being called in JavaScript
text
Body
copied!<p>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.</p> <p>Why will the following code run the <code>while</code> 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 <code>while</code> loop?)</p> <pre><code><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> </code></pre> <p>*The reason that I'm designing my code like the above is ultimately because I want to do something like this:</p> <pre><code>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... } } </code></pre> <p>P.S. if you're going to test this code, please note that I used the HTML5 canvas, so some browsers might not work?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload