Нажмите, чтобы закончить, прежде чем снова активировать

Question

Я работаю над простым видом слайд-шоу со следующими и предыдущими кнопками для навигации.

Как я установить это оказывает контейнер с 7 горками в нем, что все они имеют один и тот же размер, что и контейнер и с левой расположены на 100%, 200% и т.д.

Кнопки анимировать marginLeft, чтобы перейти к следующему или предыдущему слайду.

$('#slideArrowRight').click(function(){ 
     var allSlides = $(this).siblings('.slideContainer'); 
     var slideWidth = allSlides.width(); 
     var maxSlides = $('.slideContainer').length - 1; 
     var maxWidth = maxSlides * slideWidth; 
     var negative = 0 - maxWidth; 

     if (parseFloat($(allSlides).css('marginLeft')) <= negative) {} 
     else {  $(allSlides).animate({marginLeft: "-=" + (slideWidth) + "px"}, {duration:200});  } 

    }); 

Я использую оператор if, чтобы проверить, достигнута ли максимальная величина marginLeft, чтобы она не могла идти дальше.

Вот что я придумал. и выглядит, что на самом деле работает xD (довольно новый для javascript и jQuery, так что да, я получаю выход, если материал начинает работать)

Но если я нажимаю кнопки очень быстро, он получает поэтажку последний слайд, поскольку функция стекает в очередь. и максимальный marginLeft не достигнут в момент щелчка.

Итак, мой вопрос: как я могу получить его так, чтобы функция не могла работать, кроме как если функция закончена?

I try'd .finish(), но это мгновенно отменяет анимацию и не то, что я ищу. В основном я хочу, чтобы функция не могла выполняться, если функция не находится в очереди.

Answer 1

Вы должны использовать простой флаг animationUnderExecution, который установлен в начале функции и устанавливается в false в конце.

Прежде всего определить флаг перед функцией события:

var animationUnderExecution = false; 

Теперь внутри вашей функции (в самом начале), проверьте, если вы выполняете другую анимацию и установить флаг правда:

if (animationUnderExecution) return; 
animationUnderExecution = true; 

сейчас вы должны установить флаг в false при завершении анимации:

$(allSlides) 
    .animate({marginLeft: "-=" + (slideWidth) + "px"}, 
     {duration:200}, 
     complete: function() { 
      animationUnderExecution = false; 
    }); 

Резюме должно содержать выглядите следующим образом:

var animationUnderExecution = false; 
$('#slideArrowRight').click(function(){ 

     if (animationUnderExecution) return; 
     animationUnderExecution = true; 

     var allSlides = $(this).siblings('.slideContainer'); 
     var slideWidth = allSlides.width(); 
     var maxSlides = $('.slideContainer').length - 1; 
     var maxWidth = maxSlides * slideWidth; 
     var negative = 0 - maxWidth; 

     if (parseFloat($(allSlides).css('marginLeft')) <= negative) {} 
     else {  
      $(allSlides) 
       .animate({marginLeft: "-=" + (slideWidth) + "px"}, 
        {duration:200}, 
        complete: function() { 
         animationUnderExecution = false; 
       }); 
     } 

    });