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

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

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

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

编辑:这里是一些我很快就能解决你的嵌套循环与等待子循环:http://jsfiddle.net/t4gsR/-它可能有点超出你的头，如果你仍然是一个初学者，但按下"运行"在顶部菜单，看看它的工作:)

相关内容

最新更新

热门标签：