JQuery анимация: игнорировать двойной щелчок

Question

У меня есть простая анимация jQuery, которая перемещает div вправо или влево при событии .click ().

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

Вот пример того, что у меня есть:

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

Функция slide_button () проверит, находится ли позиция div в допустимых пределах для точки зрения пользователя.Если это так, то это позволит правой или левой кнопке быть видимой.Если он выходит за пределы, он будет скрывать кнопки.

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

Есть ли способ работать с этим, чтобы игнорировать двойные щелчки?

Answer 1

Просто проверьте, если элемент уже анимируется:

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});    

Answer 2

Вы можете использовать one () в jquery:

$('a#right').one("click", function () {
    slide($(this));
});

function slide(obj) {
    if (obj.is(':visible')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
            $('a#right').one("click", function () {
              slide($(this));
            }
        });
}

После завершения анимации событие click снова связывается со ссылкой и может быть выполнено не более одного раза..

Answer 3

Обычно я обхожу это, устанавливая глобальную переменную и запускаю, если вроде

 clicked = true;
 $(div).click(function(){
   if (!clicked){
       clicked = true;
       Your function with a callback setting clicked to false
   }
   ....
 })

Answer 4

Вы можете .unbind() событие щелчка один раз щелкнуть, что предотвратит его многократное выполнение:

$('a#right').click(function () {
    $(this).unbind('click');
    ...
});

После завершения анимации вы можете привязать его, если вам нужновозможность щелкнуть снова.