“鼠标按下时”没有在 JavaScript 中被调用
在 Javascript 中，我想为鼠标单击创建一个处理程序。然后，我希望能够在运行下一行代码之前“忙等待”几秒钟。*但是在“忙等待”中，我希望仍然能够处理鼠标单击事件。
为什么以下代码将完全运行 while 循环，然后激活处理程序？ （例如，为什么在 busy-wait while 循环的中间不会调用鼠标单击处理程序事件？）
<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>
*我像上面这样设计代码的原因最终是因为我想做这样的事情：
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...
}
}
PS 如果你要测试这段代码，请注意我使用了 HTML5 画布，所以某些浏览器可能无法工作？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
JavaScript 只有一个线程。如果您执行 while-true 循环，它实际上会冻结整个页面，直到代码停止运行。
要在执行某些代码之前等待一定时间，您应该使用 setTimeout。不过，问题的最终解决方案比这更复杂一些 - 您需要递归 setTimeout 来处理循环。
编辑：这是我快速想出的东西，它应该可以通过在子循环中等待来解决您的嵌套循环： http://jsfiddle.net /t4gsR/ - 如果您仍然是初学者，它可能会有点超出您的理解，但是按顶部菜单上的“运行”并查看它的工作原理:)
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 :)