直到第一個動作完成時才阻止輸入？

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

* S/O給用戶誰我也喜歡我的最後一個問題，我喜歡這種方式^ _^

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

將代碼封裝在左右按鈕單擊函數中，並帶有一個布爾變量。

傳遞函數進入延時功能，這樣，當動畫結束

你把布爾值回假。