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 に答える