0

在 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...
    }
}

PS 如果你要测试这段代码，请注意我使用的是 HTML5 画布，所以某些浏览器可能无法工作？

4

1 回答 1

1

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

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

编辑：这是我快速整理的内容，它应该通过在子循环中等待来解决您的嵌套循环：http: //jsfiddle.net/t4gsR/ - 如果您仍然是初学者，它可能会有点过头，但是按顶部菜单上的“运行”并查看它的工作:)

于 2011-09-25T20:13:56.780 回答