jquery - 在第一个操作完成之前阻止输入？

Question

在我的代码中，我有一个 div 在按下按钮时会左右移动。但是，当我多次按下按钮时，它会根据按下的次数移动。我想要它做的是在动画完成之前阻止任何输入（或按下按钮）。

我尝试使用延迟来防止操作“排队”，但这只是将它们推迟了几秒钟。

这是我目前的代码*以及该想法的 jsfiddle 示例：http: //jsfiddle.net/Sjfuv/（是的，它们不同，示例不是我自己制作的）

jQuery(document).ready(function($) {
var clickState = 0;
var cssForState = [{
        'margin-left': '0px'
    },{
        'margin-left': '-850px'
    },{
        'margin-left': '-1700px'
    }];

var advanceToNextClickState = function() {
    clickState++;
    if (clickState >= cssForState.length)
        clickState = 0;
};

var previousClickState = function() {
    clickState--;
    if (clickState < 0)
        clickState= 2;

};
$('.RButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);
    advanceToNextClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState]);
});    

$('.LButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);
    previousClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState]);
});    
});

*向在我最后一个问题上帮助我的用户表示感谢，我喜欢这种工作方式^_^

Answer 1

$('.RButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);

    //makes your button unclickable
    var $btn = $(this);
    $btn.attr("disabled", true);

    advanceToNextClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState], function(){
        //when animation is over, make it clickable
        $btn.attr("disabled", false);
    });
});    

Answer 2

使用 bind 和 unbind 方法来添加你的函数。在动画之前取消绑定这个，在动画之后再次绑定它。

Answer 3

使用布尔变量将代码包装在左右按钮单击函数中。

将一个函数传递给延迟函数，以便在动画结束时

您将布尔值转回 false。