Многочисленные проблемы с jQuery для игры в стиле Wack-A-Mole

Question

Я действительно изо всех сил пытаюсь пройти через это, но продолжаю сталкиваться с проблемами. Это игра, в которой всплывают мыши, и вы бьете их и получаете очки. Надеюсь, вы можете увидеть это здесь... http://thetally.efinancialnews.com/tallyassets/wackamouse/index.html

В конечном итоге я хочу, чтобы мыши всплыли после случайной задержки, а затем снова опустились. Как только они поднимаются, они становятся "кликабельными". Это класс, который добавляется, когда они поднимаются.

Однако события щелчка не работают для классов, которые были добавлены динамически. Я нашел вопрос, который должен был ответить на эту проблему, но для меня это не имело смысла.

Также задержка становится все короче и короче. Это мой компьютер кеширует и ускоряет? Есть ли способ сделать согласование времени задержки. Или, по крайней мере, около реальных секунд.

Вот код JQuery до сих пор...

var score = 0;  

$(document).ready(function() {


function mouseShow(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 7000, max = 13000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){

            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '0'
            }, 300, function() {
                $mouse.addClass('clickable');
                mouseHide();
            });

        },  delay);

    });

}

function mouseHide(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 4000, max = 6000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){
            $mouse.removeClass('clickable');
            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '40px'
            }, 300, function() {
                mouseShow();
            });

        },  delay);

    });

}

mouseShow();

    $('.clickable').click(function() {


        $('.score p').remove();
        score += 1;
        $('.score').append( "<p>"+score+"</p>" );
        console.log(score);

    });




});

Answer 1

Вам нужно использовать делегированный обработчик событий, связанный с неизменяемым элементом-предком ваших мышей (например, .mice div) например:

$('.mice').on('click', '.clickable', function() {

Он работает, прослушивая события, восходящие к целевому элементу, затем применяя селектор jQuery к элементам в цепочке пузырьков, затем применяя функцию к любым элементам, вызвавшим событие. Конечным результатом является .clickable элементы должны совпадать только во время события. Для этого требуется только один обработчик для многих элементов, и накладные расходы довольно низкие (и, поскольку вы можете щелкнуть только несколько раз в секунду, разница в производительности незначительна)

Re: задержка, трудно увидеть со случайными числами. Попробуйте с фиксированной продолжительностью проверить производительность, а затем переключитесь на случайную.