【问题标题】：Disable Onclick until end of duration禁用 Onclick 直到持续时间结束
【发布时间】：2014-04-30 05:35:42
【问题描述】：

我正在使用 jquery 插件jrumble，所以我可以在我的 div 上实现抖动效果。在 onclick 功能上会运行摇晃效果，一段时间后会弹出一个警报，警报包含来自魔术八球的典型响应。但是，如果我快速点击div多次，div会不断抖动，并且会连续多次弹出alert。我想禁用 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>

【问题讨论】：

在 jquery 中使用一个事件

标签： javascript jquery html css

【解决方案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>

感谢和问候。

【讨论】：

【解决方案2】：

`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

【讨论】：

像魅力一样工作。谢谢

【解决方案3】：

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

然后修改click事件，如果设置了变量就什么都不做。

【讨论】：