javascript - 禁用 Onclick 直到持续时间结束

Question

我正在使用 jquery 插件 jrumble这样我就可以在我的 div 上实现摇动效果。在函数onclick 上，摇动效果会运行，一段时间后，会弹出一个警报，警报包含魔术八球的典型响应。但是，如果我快速点击div多次，div会不断抖动，并连续弹出多次警告。我想在显示警报弹出窗口之前禁用 onclick。这是我的代码。

<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

大家试试这个，我做了一些修改。

<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>

感谢和问候。