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

谢谢和问候。

Answer 2

工作小提琴

jQuery代码

$('#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);
});  

参考帮助

Answer 3

一个简单的解决方案是在震动开始时将变量"rumbling"设置为1，并在震动结束时将其清除。

然后修改click事件，使其在设置变量时不执行任何操作。