使 <div> 200毫秒內不可點擊

Question

我希望此框可以像我所做的那樣上下移動，但是我不希望人們能夠單擊它一百萬次然后觀看它上下，因為您可以單擊它快得多。 所以我的問題是... 我該如何為點擊設置200毫秒的延遲，或者在200毫秒內使其不可點擊？

這是jsfiddle： http : //jsfiddle.net/QwwUD/4/

 <html>   

<style>
div { 
position:absolute; 
background-color:#abc; 
left:50px;
width:90px; 
height:90px;
top:100px;
margin:5px; 
}
</style>

<div class="block" id='up' disabled='true'></div>

<script>

$('.block').click(function(){


    if($('.block').attr('id') == 'up'){
        $('.block').animate({'top': '-=50px'}, 200);
        $('.block').attr('id', 'down');
    }else{
        $('.block').animate({'top': '+=50px'}, 200);
        $('.block').attr('id', 'up');
    }
    }
    ); 

</script>
</body>
</html>

Answer 1

在動畫上嘗試.stop ：

http://jsfiddle.net/QwwUD/1/

$('.block').click(function() {

    var btn = $('.block');
    btn.prop('disabled', true);
    window.setTimeout(function() {
        btn.prop('disabled', false);
    }, 600);

    if ($('.block').attr('id') == 'up') {
        $('.block').stop(true,true).animate({
            'top': '-=50px'
        }, 200);
        $('.block').attr('id', 'down');
    } else {
        $('.block').stop(true,true).animate({
            'top': '+=50px'
        }, 200);
        $('.block').attr('id', 'up');
    }
});

Answer 2

如果單擊事件當前正在設置動畫，則可以停止使用：

$('.block').click(function(){
    if ( $(this).is(":animated") ) return false;
    ... rest of your code ...
});

但是，我喜歡按照Esailija的建議停止動畫。

使 <div> 200毫秒內不可點擊

問題描述

2 個解決方案

解決方案1
4 已采納 2012-07-16 19:39:16

解決方案2
2 2012-07-16 19:45:25

使 <div> 200毫秒內不可點擊

問題描述

2 個解決方案

解決方案1 4 已采納 2012-07-16 19:39:16

解決方案2 2 2012-07-16 19:45:25

解決方案1
4 已采納 2012-07-16 19:39:16

解決方案2
2 2012-07-16 19:45:25