'onmousedown' не вызывается в JavaScript

В 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, поэтому некоторые браузеры могут не работать?


javascript multithreading event-handling onmousedown
person David T.    schedule 25.09.2011    source источник
comment
Вам не хватает точек с запятой повсюду, особенно в строке debugMessageElement. Может вызвать проблемы..   -  person Adam Eberlin    schedule 26.09.2011
comment
Извини за это. Javascript на самом деле не заботится о точках с запятой, так что, к сожалению, это не проблема (хотелось бы, чтобы это было так просто!). Я привык к Ruby и Python, поэтому не использую точки с запятой. Но спасибо за подсказку. потихоньку перехожу на JS   -  person David T.    schedule 26.09.2011
comment
Javascript ДЕЙСТВИТЕЛЬНО заботится о точках с запятой, но некоторые браузеры этого не делают, и они будут вставлять недостающие точки с запятой по своему усмотрению. Я настоятельно рекомендую вам придерживаться спецификации и явно использовать точку с запятой там, где она предназначена.   -  person Adam Eberlin    schedule 26.09.2011
comment
Вы случайно не знаете, не испортит ли мой код автоматическая вставка точки с запятой для определенных браузеров? но, тем не менее, вы правильно сделали, что придерживаетесь спецификаций, и я думаю, что дойду до того, что в конечном итоге начну использовать их более явно. Спасибо за отзыв, и если есть какие-то другие советы для новичков в JS, поделитесь, пожалуйста!   -  person David T.    schedule 26.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

JavaScript имеет только один поток. Если вы выполняете цикл while-true, он фактически заморозит всю страницу до тех пор, пока код не перестанет выполняться.

Чтобы подождать определенное время перед выполнением некоторого кода, вы должны использовать setTimeout. Окончательное решение вашей проблемы немного сложнее - вам понадобится рекурсивный setTimeout для обработки цикла.

редактировать: вот что я быстро накрутил, что должно решить ваш вложенный цикл с ожиданием в подцикле: http://jsfiddle.net/t4gsR/ — это может показаться вам слишком сложным, если вы все еще новичок, но нажмите «Выполнить» в верхнем меню и посмотрите, как это работает :)

person Jani Hartikainen    schedule 25.09.2011
comment
Я посмотрел на setTimeout и setInterval, однако я не был уверен, как именно его применить. я мог бы сделать рекурсивный setTimeout, но не испортит ли это вложенные циклы for? - person David T.; 26.09.2011
comment
Этот. Что-то ужасно неправильно, когда я вижу вопрос, помеченный как javascript, так и многопоточность. - person sethobrien; 26.09.2011
comment
да ... я знаю, javascript не является многопоточным, и поэтому я хочу изучить способ реализации проблемы с помощью javascript - person David T.; 26.09.2011
comment
@ДэвидТ. Я добавил пример в ссылку jsfiddle для решения проблемы с вложенным циклом :) - person Jani Hartikainen; 26.09.2011
comment
Это хорошо. я немного понял (не полностью) и мог бы использовать это. Спасибо!! - person David T.; 26.09.2011