CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jeongbebs
Jeongbebs

Reputation: 4120

Disable Onclick until end of duration

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>

Upvotes: 0

Views: 235

Answers (3)

Aniket
Aniket

Reputation: 118

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.

Upvotes: 1

Bhavik
Bhavik

Reputation: 4894

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

Upvotes: 0

6502
6502

Reputation: 114461

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.

Upvotes: 0

Related Questions