如何使点击事件在几秒钟内对用户不可点击？

Question

How to make click event non-clickable for user for a few seconds once the user has clicked the button?

For eg.

$('button').on('click',function(){
alert('you clicked');
}

It alerts every time. But I want to make that button something else whatever that I've assigned the click event on, here in example, if the user clicks again within next 20 seconds it should not work and after 20 seconds the button should be clickable that is if the user clicks after 20 seconds it alerts again.

Answer 1

 $('button').on('click',function(){
  alert('you clicked');
  $(this).prop("disabled", true);
  setTimeout( function(){$(this).prop("disabled", false);},20000 );
 }

Answer 2

Not tested but :

var isClickable = true;
$('button').on('click',function(){
    //Exit if not clickable
    if(!isClickable)
        return false;

    //Set not clickable
    isClickable = false;
    //And finally plan to reset clickable in 20 seconds 
    setTimeout(function(){isClickable=true;},20000);

    //Then, your code
    alert('you have just clicked');
}

Answer 3

http://jsfiddle.net/bzY62/

$('button').on('click', function(){
    var _$this = $(this);

    if(!_$this.data('blocked')) {
        alert('you clicked');

        _$this.data('blocked', true);

        setTimeout(function() {
           _$this.data('blocked', false);
        }, 5000); // in miliseconds
    }
});

Answer 4

You can try this

var seconds = 5; //seconds to disable a button
$('#yourbutton').click(function(){ //yourbutton is the id of button
    var btn = $(this);
    btn.prop('disabled', true);  //disables the buttons
    setTimeout(function(){  //renable the button after seconds specified
        btn.prop('disabled', false);
    }, seconds*1000);
});