Disable Onclick until end of duration

Question

I am using a jquery plugin jrumble so I can achieve a shake effect on my div. On the function onclick the shake effect will run, and after some time, an alert will popup, the alert contains typical responses from the magic eight ball. However, If I click the div multiple times quickly, the div will shake continuously, and an alert will popup multiple times consecutively. I want to disable the onclick until the alert popup is shown. Here is my code.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jrumble.1.3.min.js"></script>

<div class="middleBall">
<div id="MagicEightBall"><img src="ball01.png" width="100%"> </div>
</div>

<script>
var messages = new Array();
messages[0] = "No";
messages[1] = "Not today";
messages[2] = "It is decidedly so";
messages[3] = "Without a doubt";
messages[4] = "Yes definitely";
messages[5] = "You may rely on it";
messages[6] = "As I see it yes";
messages[7] = "Most likely";
messages[8] = "Outlook good";
messages[10] = "Signs point to yes";
messages[11] = "Reply hazy try again";
messages[12] = "Ask again later";
messages[13] = "Better not tell you now";
messages[14] = "Cannot predict now";
messages[15] = "Concentrate and ask again";
messages[16] = "Don't count on it";
messages[17] = "My reply is no";
messages[18] = "My sources say no";
messages[19] = "Outlook not so good";
messages[20] = "Very doubtful";


$('#MagicEightBall').jrumble({
x: 10,
y: 10,
rotation: 3,
speed: -100
});
var demoTimeout;
var answerTimeout;
$('#MagicEightBall').click(function(){
$this = $(this);
clearTimeout(demoTimeout);
clearTimeout(answerTimeout);
$this.trigger('startRumble');
demoTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 3000)
finishFast = setTimeout (function(){
var randomnumber = Math.floor(Math.random() * 21);
alert(messages[randomnumber]);
},3500);

});
</script>

Answer 1

Folks try this i have made some modifications.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jrumble.1.3.min.js"></script>

<div class="middleBall">
<div id="MagicEightBall"><img src="ball01.png" width="100%"> </div>
</div>

<script>
var messages = new Array();
messages[0] = "No";
messages[1] = "Not today";
messages[2] = "It is decidedly so";
messages[3] = "Without a doubt";
messages[4] = "Yes definitely";
messages[5] = "You may rely on it";
messages[6] = "As I see it yes";
messages[7] = "Most likely";
messages[8] = "Outlook good";
messages[10] = "Signs point to yes";
messages[11] = "Reply hazy try again";
messages[12] = "Ask again later";
messages[13] = "Better not tell you now";
messages[14] = "Cannot predict now";
messages[15] = "Concentrate and ask again";
messages[16] = "Don't count on it";
messages[17] = "My reply is no";
messages[18] = "My sources say no";
messages[19] = "Outlook not so good";
messages[20] = "Very doubtful";


$('#MagicEightBall').jrumble({
x: 10,
y: 10,
rotation: 3,
speed: -100
});
var demoTimeout;
var answerTimeout;
$('#MagicEightBall').click(function(){
$this = $(this);

clearTimeout(demoTimeout);
clearTimeout(answerTimeout);
$this.trigger('startRumble');
$this.css("pointer-events","none");
demoTimeout = setTimeout(function(){$this.trigger('stopRumble'); $this.attr("disabled",false);}, 3000)
finishFast = setTimeout (function(){
var randomnumber = Math.floor(Math.random() * 21);
alert(messages[randomnumber]);
 $this.css("pointer-events","auto");
},3500);

});
</script>

Thanks and regards.

Answer 2

A simple solution is to set a variable "rumbling" to 1 when the shaking starts and clearing it when it finishes.

Then modify the click event so that it does nothing if the variable is set.

Answer 3

Working Fiddle

jQuery Code

$('#MagicEightBall').click(function(){
    var handler = arguments.callee;
    $this = $(this);
    $this.off("click", handler);
    clearTimeout(demoTimeout);
    clearTimeout(answerTimeout);
    $this.trigger('startRumble');
    demoTimeout = setTimeout(function () {
        $this.trigger('stopRumble');
        $this.click(handler);
    }, 3000)
    finishFast = setTimeout(function () {
        var randomnumber = Math.floor(Math.random() * 21);
        alert(messages[randomnumber]);
    }, 3500);
});  

Reference Help