CODEWITHSUNDEEP
javascriptjqueryhtml
Bhuwan
Bhuwan

Reputation: 16855

prevent click event on element for 2 seconds

I have a code below. When I click on the .click div, it appends a text into .append div.

Now what I want is when I click the .click div first time the text should be appended to .append div, but second click should be active after 2 second. Means no matter how many times I clicks I in .click div between 0 to 2 second, the event should be triggered once.

I have tried event.stopPropagation() and event.preventDefault() but not working.

$(document).on('click', '.click', function(event) {
  $('.append').append('<span>append</span>');
  setTimeout(function() {
    event.stopPropagation();
  }, 2000);
})
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 0

Views: 1619

Answers (8)

user1039663
user1039663

Reputation: 1335

Althought using setTimeout is an option I personally prefer to avoid setting timers when possible and track time from the last click with a variable:

var lastClickTime = 0;
$(document).on('click', '.click', function(event) {
  var thisClickTime = new Date().getTime();
  if (thisClickTime - lastClickTime > 2000) {
    $('.append').append('<span>append</span>');
    lastClickTime = thisClickTime;
  }
});

Upvotes: 1

jasmin_makasana
jasmin_makasana

Reputation: 482

Try using:

var isClickActive = true;
$(document).on('click', '.click', function(event) {
  if(isClickActive){
     appendDiv();
     isClickActive = false;
  } else {
     $(".click").css({'pointer-events':'none'});
     setTimeout(function(){
        $(".click").css({'pointer-events':'auto'});
        appendDiv();
     },2000);
  }
})
function appendDiv(){
   $('.append').append('<span>append</span>');
}

Upvotes: 0

Ezekiel
Ezekiel

Reputation: 696

Hi you may want to do something like this

$(document).on('click', '.click', function(event) {
 var divState = false;
 if(divState ){ setTimeout(function() {
       $('.append').append('<span>append</span>'); 
   divState=false; },2000);
   } else{ 
     $('.append').append('<span>append</span>');divState= true;
  }
})

or

$(document).on('click', '.click', function(event) {
 var divState = false;
 divState ? function(){setTimeout(function() {
       $('.append').append('<span>append</span>'); 
   divState = false },2000);} : function(){ 
   $('.append').append('<span>append</span>'); divState = true;};
})

Which ever works best for you

Upvotes: -1

Matias Kinnunen
Matias Kinnunen

Reputation: 8560

One way is to add a "flag" variable.

var enabled = true;

$(document).on('click', '.click', function(event) {
  if (!enabled) return;

  $('.append').append('<span>append</span>');
  enabled = false;

  setTimeout(function() {
    enabled = true;
  }, 2000);
})
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

You could keep trace with a variable :

var clicked = false;

$(document).on('click', '.click', function(event) {
  if(!clicked){
    clicked = true;
    $('.append').append('<span>append</span>');
    setTimeout(function() {
      clicked = false;
    }, 2000);
  }
});
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 0

Satpal
Satpal

Reputation: 133453

As you are using Event delegation use it to take advantage, remove the selector class i.e. click in the event handler and then add it after the interval.

$(document).on('click', '.click', function(event) {
  $('.append').append('<span>append</span>');
  var self = $(this);
  self.removeClass('click'); //Remove the class
  setTimeout(function(elem) {
    elem.addClass('click'); //Add the class
  }, 2000, self);
})
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 193258

Use jquery .one() to set the handler, and then after 2 sec, set it again using .one().

The .one() method adds a one time event handler, that is removed as soon as the event is invoked. 

function eventHandler(event) {
  $('.append').append('<span>append</span>');
  
  setTimeout(function() {
    $(document).one('click', '.click', eventHandler);
  }, 2000);
}

$(document).one('click', '.click', eventHandler);
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 2

user9019817
user9019817

Reputation:

You can do this by adding a click variable and an if statement.

On the first click it checks the variable and runs the function, but also updates the variable. The variable is then reset after 2 seconds to re-activate the function.

var clickActive = 1;

$(document).on('click', '.click', function(event) {
  if (clickActive) {
    $('.append').append('<span>append</span>');
    clickActive = 0;
    setTimeout(function() {
      clickActive = 1;
    }, 2000);
  }
})
body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Upvotes: 3

Related Questions