Question

I do have a problem to stop executing functions, I’ll try to explain what I want to do and how I’m trying to do it.

For example, I bind some event on element a or button and I’d like to user will not click it again, I mean they can click it, but all actions will not be called for some time (say a second).

So, here is some examples:

In html

1st example 
<ul>
   <li><a href="some url" class='button'>Click me</a></li>
   <li><a href="some url" class='button'>Click me</a></li>
   <li><a href="some url" class='button'>Click me</a></li>
</ul>

2nd example somewhere else:
<section id='someid'>
   some info
   some articles - doesn't matter
   <button class='button iLoadComments'>Load more comments</button>
</section>

In JavaScript:

$("ul").on("click","a.button",function(){
   ... here some code or ajax request, whatever
   return false;
});
$("section").on("click","iLoadComments",function(){
   ... some ajax request
   return false;
})

and I’d like to not allow to execute it,
and I want to cover ALL code by one function.

So, what I did: globally I defined a new event listener and add attribute disabled to that element

$("body").on("mousedown", ".button", function(e){
    var $this=$(this);
    if ($this.attr("disabled")) {
        var event = e || window.event;
        if (event.stopPropagation) {
                event.stopPropagation();
        } else {
                event.cancelBubble = true;
        }
        event.preventDefault();
        setTimeout(function () {
           $this.removeAttr("disabled");
        }, 1000); 
        return false;
    }else{
       $this.attr("disabled", true);
       
    }
});

but the problem is delegated function will execute anyway!

Could somebody help please, is there better practise, or way to correct that way?

Answer 1

var click_enabled  = true;
$("body").on("click",".button",function(){
   if (click_enabled) {
        click_enabled = false;
        setTimeout(function() {
            click_enabled =  true;
        }, 1000);
   } 
   return false;
});

$("ul").on("click","a.button",function(){
    if (!click_enabled)
        return false;
   //... here some code or ajax request, whatever
});
$("section").on("click",".iLoadComments",function(){
    if (!click_enabled)
        return false;
   //... some ajax request
});

http://jsfiddle.net/EAhK4/