CODEWITHSUNDEEP
javascriptjqueryevent-handlingjquery-events
YahyaE
YahyaE

Reputation: 1057

Prevent successive clicks bound on a div with jQuery

I am playing with a slider script. In the script, left and right arrow wrapped in a div and click event bound over the div. It works no problem, but what I need when it clicked on the div, I need to prevent successive clicks for two seconds. Then it should be clickable again. I'd appreciate any advice.

$container.find('.laos-slider-controls').bind('click',function(){
  var target = $(this).attr('data-target');
  if(target!='next'&&target!='prev') target=parseInt(target);
  changeSlides(target);
});

HTML is :

<div class="laos-slider-controls-wrapper">
  <div class="laos-slider-controls" data-target="prev">&lsaquo;</div>
  <div class="laos-slider-controls" data-target="next">&rsaquo;</div>
  <ul class="laos-slider-pagers"></ul>
</div>

Upvotes: 2

Views: 209

Answers (5)

Waldo Jeffers
Waldo Jeffers

Reputation: 2279

I think you can use two different techniques :

  1. On the click event, remove the Event Listener, then use setTimeout to set it again.
  2. Use a global variable to store current time and check if a happened less than s ago when the user clicks on your div

The problem with solution #1 is that if your user clicks a lot, it will become very uggly when it comes to performance. In addition, if he keeps clicking, the timer will be reset every time, and he will never see the next slide. I think solution #2 is the better one here. You could implement it like so :

var time = 0;
var newTime;
$container.find('.laos-slider-controls').bind('click',function(){
  newTime = new Date().getTime(); // current time in ms !
  if (newTime - time >= 2000){
      var target = $(this).attr('data-target');
      if(target!='next'&&target!='prev') target=parseInt(target);
      changeSlides(target);
      time = newTime;
  }
});

Upvotes: 1

BRW
BRW

Reputation: 353

Two options come to mind, both using a timeout.

1) You could create a variable to act as a flag, set it to try on click, then have a setTimeout() that sets it back to false. Then, in your function, you check that flag, if true, you return false, so your click even never actually happens.

var clickFlag = false;

$container.find('.laos-slider-controls').bind('click',function(){
    if (clickFlag) {
        return false;
    }

    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    clickFlag = true;
    setTimeout(function() { clickFlag = false; }, 2000);
});

2) You could do something similar, except that instead of using a flag, you unbind the click event on the DIV, and rebind it on the 2 second timeout.

function BindSliderClick() {
    $container.find('.laos-slider-controls').bind('click', SliderClick);
}

function SliderClick(){
    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    $('.laos-slider-controls').unbind('click');
    setTimeout(BindSliderClick, 2000);
}

Personally, I would probably recommend the first option.

Upvotes: 1

Syjin
Syjin

Reputation: 2809

One possible solution is to use a flag variable isClickable and a Timeout to reset this flag variable after a specific time.

(function () {
    var isClickable = true;

    $container.find('.laos-slider-controls').bind('click',function(){
        if (isClickable) {
            var target = $(this).attr('data-target');
            if(target!='next'&&target!='prev') target=parseInt(target);
            changeSlides(target);

            isClickable = false;

            setTimeout(function () {
                isClickable = true;
            }, 2000);
        }
    });
})();

Upvotes: 2

Xavjer
Xavjer

Reputation: 9274

How about something like this:

var timeout;
var changeTheSlides = true;
$container.find('.laos-slider-controls').bind('click',function(){
  if(changeTheSlides) {
    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    timeout = setTimeout(function() {
        changeTheSlides = false;
    }, 2000); // 2sek timeout
    },
    function () {
      clearTimeout(timeout);
      changeTheSlides = true;
    });
  }
}

Upvotes: 1

Kevin Cloet
Kevin Cloet

Reputation: 2976

Use the unbind function in jQuery in combination with the setTimeout function 

function SliderClickEvent(){
 var target = $(this).attr('data-target');
 if(target!='next'&&target!='prev') target=parseInt(target);
 changeSlides(target);

 //unbind the event
 $container.find('.laos-slider-controls').unbind('click');

 //Do a timeout and rebind the event
 setTimeout(function() {
            $container.find('.laos-slider-controls').bind('click',SliderClickEvent);
        }, 2000);
}

$container.find('.laos-slider-controls').bind('click',SliderClickEvent);

Upvotes: 2

Related Questions