Как предотвратить создание очереди кликов, используя переключатель в JQuery? попытался использовать bind / unbind ('click') - PullRequest
Новая
       12

Как предотвратить создание очереди кликов, используя переключатель в JQuery? попытался использовать bind / unbind ('click')

1 голос
/ 22 сентября 2009

Я хочу отключить обработчик щелчков, когда отображается анимация переключения, чтобы анимация не создавалась из-за многократного быстрого щелчка. спасибо

JQuery скрипт: 

$("#button").click({
    $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')});
});

HTML-код 

<div
   <a href='#' id='button'>Toggle</a>
   <div>
    test
   </div>
</div>

Ответы [ 5 ]

2 голосов
/ 03 апреля 2015

1-й метод

Отмена щелчков по событию во время анимации переключения: 

$("#button").click(function(e) {

    e.stopPropagation();

    if ( $(this).next().is(':animated') ) {
        return false;
    }

    $(this).next().toggle("slow");
});

См. Демонстрацию

2-й метод

Установите задержку, чтобы убедиться, что срабатывает только последний щелчок: 

var timeID;

$("#button").click(function(e) {

    var $el = $(this);

    clearTimeout(timeID);

    timeID = setTimeout(function() {
        $el.next().toggle("slow");
    }, 250);    

});

См. Демонстрацию

2 голосов
/ 22 сентября 2009

Как уже упоминалось, ваша реализация прикрепления к событию нарушена. Кроме того, в jQuery есть метод .stop, который избавляет вас от необходимости использовать bind / unbind. 

$("#button").click(function(){
    $(this).next().stop().toggle("slow");
});

Все, что он делает - это очищает очередь анимации и останавливает текущую анимацию, позволяя запустить следующую.

Функция остановки в документах jQuery. Обратите внимание, что у нее есть два свойства - clearQueue и goToEnd. Подробнее об использовании этого метода читайте подробнее.

2 голосов
/ 22 сентября 2009

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

$("#button").click(function(evt) { // <- you need to pass it a function!
    $(this).unbind('click').next()
       .toggle("slow",function(){$('#button').bind('click')});
});

Но на твою проблему. Я думаю, что вы выиграете от использования jQuery's one function . Как только обработчик щелчка вызывается, он удаляется как обработчик щелчка; следовательно, он выполняется только один раз , для один щелчок. Чтобы снова включить обработчик щелчков после анимации, я думаю, вы поняли это правильно; повторно связать его после завершения анимации. 

function clickHandler(evt) {
    $(this).next().toggle("slow",
        function() {
            $('#button').bind('click', clickHandler);
        });
}

$("#button").one('click', clickHandler);

Если использование one слишком медленное для вас, самым быстрым способом было бы также добавить javascript прямо на href привязки. Но вам нужно будет переключить глобальную логическую переменную, когда вы будете готовы снова выполнить. 

<a href="javascript:clickHandler(); return false;">...</a>

function clickHandler() {
    if( someBoolean ) {
        someBoolean = false;
        //do stuff
    }
    someBoolean = true;
}
1 голос
/ 22 сентября 2009

Вместо того, чтобы игнорировать последующие клики, вы можете получить некоторую выгоду от метода stop(). См. Быстрый совет: например, предотвращение создания очереди анимации . Он говорит о hover, но это справедливо для любого места, где вы можете запускать анимации одну за другой в одном и том же событии.

В качестве альтернативы, вы можете отключить кнопку вместо того, чтобы отбрасывать весь обработчик кликов? Это, вероятно, выражает намерение «не щелкай меня снова» лучше, чем отбрасывание кликов.

0 голосов
/ 01 июля 2017

существует проблема с методом переключения jquery, когда пользователь быстро нажимает на элемент переключения, иногда он дает неправильный результат. это происходит из-за секундной секунды события щелчка, когда первое событие не полностью завершено, второй триггер события, который создает проблему. Решение этой проблемы немного сложнее, но легко с помощью функции settimeout: 

    $('.navbar-toggle').on('click', function() {
    $('.mob-logo').toggle();
    $('.navbar-toggle').css('pointer-events', 'none');

    setTimeout(function() {
    // enable click after 0.5second
    $('.navbar-toggle').css('pointer-events', 'all');
    }, 500); // 1 second delay
    });
...