滑块功能没有足够的时间进行快速点击

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++;  
        })
    }
    }

    };