Функции слайдера не хватает времени на быстрые клики

Question

Я создал простой слайдер с помощью JQuery. Она использует следующие функции для работы:

function moveleft(){ 
if (current < $length - 1){ 
    $tape.animate({"margin-left":"-=" + $width}, $speed, function(){ 
     current++; 
     }) 
}else if(current == $length - 1){ 
    $tape.css("margin-left", 0); 
    current = 0; 
    $tape.animate({"margin-left":"-=" + $width}, $speed, function(){ 
     current++; 
    }) 
} 
}; 

function moveright(){ 
if (current == 0){ 
    $tape.css("margin-left", -$last); 
    current = $length - 1; 
    $tape.animate({"margin-left":"+=" + $width}, $speed, function(){ 
     current--; 
    }) 
}else if (current > 0){ 
    $tape.animate({"margin-left":"+=" + $width}, $speed, function(){ 
     current--; 
     }) 
} 
} 

Демо: http://jsfiddle.net/gdgk9wsf/

Он работает, но проблема в том, что, когда пользователь нажимает кнопки слишком быстро, это, вероятно, не имеет достаточно времени, чтобы вычислить значение. Итак, все идет далеко влево или вправо. Есть ли что-нибудь, что я могу добавить, чтобы исправить это?

Answer 1

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

function moveleft(){ 
    if($(tape).is(':animated')) {return} 
    else{ 
    if (current < $length - 1){ 
     $tape.animate({"margin-left":"-=" + $width}, $speed, function(){ 
      current++; 
      }) 
    }else if(current == $length - 1){ 
     $tape.css("margin-left", 0); 
     current = 0; 
     $tape.animate({"margin-left":"-=" + $width}, $speed, function(){ 
      current++; 
     }) 
    } 
    } 

    };