jquery- избегать двойных щелчков

Question

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

$(".next").click(function() { 

$('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
}); 

Answer 1

Ответ прост, используйте метод .data() установить флаг интерактивного по этому пункту. Вы можете повторно включить его в своей полной функции.

От jQuery.com: .data() Documentation

метод .data() позволяет присоединить данные любого типа к DOM элементов таким образом, что является безопасным из циклических ссылок и, следовательно, от утечек памяти.

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

Используя полный метод на анимации (который вы уже используете, чтобы показать/скрыть следующую/предыдущую кнопку , мы можем повторно активировать кнопку, чтобы быть нажата.

Обратите внимание, что мы храним $(this) в btn так можно получить от закрытия функции полный.

$(".next").click(function() { 
    var btn = $(this); 
    if (btn.data('running')) 
    return; 

    btn.data('running', true); 

    $('#result').animate({ 
    left: '-=250', 
    }, 1000, function() { 
     pos = $('#result').position(); 

     if (pos.left <= -550) { 
     $('.next').hide(); 
     } 
     if (pos.left <= -250) { 
     $('.prev').show(); 
     } 

     // Unset it here, this lets the button be clickable again 
     btn.data('running', false); 
    } 
    ); 
}); 

Answer 2

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

$(".next").click(function() { 

    $(this).enabled = false; 
    setTimeout('enableButtons()', 250);  } 

    $('#result').animate({ 
     left: '-=250', 
    }, 1000, function() { 
    pos = $('#result').position(); 

    if (pos.left <= -550) { 
$('.next').hide(); 
    } 
    if (pos.left <= -250) { 
    $('.prev').show(); 
    } 
}); 

function enableButtons() { 
    $(".next").enabled = true; 
} 

Answer 3

Вы можете сделать так, что анимация автоматически завершается до animate начинается снова:

$('#result').stop(true, true).animate({ ... 

Answer 4

отключить кнопку мыши и использовать полный вызов функции из .animate функции повторно включить его:

.animate (свойства [, длительность] [, ослабление] [, полная])

полная Функция для вызова после завершения анимации.