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

一个简单的解决方案是设置一个变量＆＃34;隆隆声＆＃34;振动开始时为1，完成时清除。

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

Answer 3

的 Working Fiddle

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

Reference Help