How to prevent multiple clicks using JavaScript or jQuery?

Question

var slideContainer = ('#slider');  
var width = 720;

function slide () {  
  if ( parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
    $slideContainer.animate({'margin-left': '-='+width},200);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='button' onclick='slide()'></a>

I have this simple function, the problem is when I click multiple clicks on the button with animation speed more than 150 it take the slider container more to the left more than -2160 the limit in my if condition .

you can also disable the button on click and enable it again anytime you want — GGw
– GGw, Commented May 28, 2018 at 3:06

Edwin.Tang · Accepted Answer · 2018-05-28 03:22:07Z

1

var slideContainer = ('#slider');  
var width = 720;
var clicked = false;

function slide () {  
      if ( clicked ) return;
      clicked = true;
      if (parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
        $slideContainer.animate({'margin-left': '-='+width},200,"linear",()=>{
clicked=false;});
       }
}

<a class='button' onclick='slide()'></a>

answered May 28, 2018 at 3:22

Edwin.Tang

212 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

janith1024 Over a year ago

explain bit of your approach then answer has more value

Edwin.Tang Over a year ago

Use the animate's callback function, when the animation is end, the click not return,else slide break ;

janith1024 Over a year ago

the explanation add to the answer then it more clear. I don't want any explanation. I want to improve your answer :)

Edwin.Tang Over a year ago

OK， this is a simple case, there are many solutions to this problem;

ahmed Over a year ago

actualy i want the button works only after the animation is done ... i don't want clicks while the animation speed ( 200 ) any way to do this ?

danu · Accepted Answer · 2018-05-28 08:04:21Z

0

You can achieve this in either ways-

You can use flag variable to indicate that animation is still in process- initially set false then set true when animation starts and false on animation completion , use this flag with & expression in if.
Little complex but still solves the purpose , you can try this- Inside function slide write the following snippet-

var events = $._data(sliderContainer[0], 'events');
                        handler = events.click;
                        events.click = null;

slideContainer.animate({'margin-left': '-='+width},{duration: 200, complete:function(){evends.click = handler }});

Hope this helps..

edited May 28, 2018 at 8:04

danu

514 bronze badges

answered May 28, 2018 at 3:10

Vishal Chaurasia

981 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to prevent multiple clicks using JavaScript or jQuery?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related