Question

在Javascript中，我想为鼠标点击创建一个处理程序。然后，我希望能够在运行下一行代码之前“忙等待”几秒钟。*但是在“忙等待”中，我仍然希望能够处理鼠标点击事件。

为什么以下代码会完全运行while循环然后激活处理程序？（例如，为什么在忙等待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...
    }
}

P.S。如果您要测试此代码，请注意我使用的是HTML5画布，因此某些浏览器可能不起作用？

Answer 1

JavaScript只有一个线程。如果你执行while-true循环，它将基本上冻结整个页面，直到代码停止运行。

要在执行某些代码之前等待一段时间，您应该使用setTimeout。你的问题的最终解决方案比这更复杂 - 你需要一个递归的setTimeout来处理循环。

编辑：这是我快速掀起的东西，它可以解决你的嵌套循环，在子循环中等待：http://jsfiddle.net/t4gsR/ - 如果你还是初学者，可能会有点过头，但是按“运行“在顶部菜单上看到它工作：）

'onmousedown'没有在JavaScript中调用

1 个答案: