Second click after animation done (Not a duplicate, not in this context!)

Question

There are similar questions but this is some different and I could not find an adequate solution.

I've simple scroll function, it works well.

JS

$('#nextTabBtn').click(function () {
     var leftPos = $('.whatever').scrollLeft();
     $(".whatever").animate({scrollLeft: leftPos + 300}, 800);
});

HTML

<a id="nextTabBtn" class="btn btn-info">
    <i class="fa fa-caret-right"></i>
</a>

The second click should be only possible, after the animation is done. A user may not click e.g. 10 times on the btn. For the second click he has to wait.

How can I do that with jQuery?

wrap an if around your animate http://stackoverflow.com/questions/724911/how-do-i-find-out-with-jquery-if-an-element-is-being-animated — Pete, Nov 17 '15 at 15:38
don't know if jquery has something build in for that, but you could just use a setTimeout to disable the click function while it's animating, since you know the max. time this should be easily possible — Florian Wendelborn, Nov 17 '15 at 15:38

score 2 · Accepted Answer · answered Nov 17 '15 at 15:37

2

There are few ways to do what you are looking for, I usually do like this:

$('#nextTabBtn').click(function () {
     var $target = $('.whatever');
     if( $target.is(':animated') ) return;
     $target.animate({scrollLeft: $target.scrollLeft() + 300}, 800);
});

answered Nov 17 '15 at 15:37

kosmos

4,253
1
18
36

great! thank you! it works perfect and it is a very elegant solution! – Nov 17 '15 at 15:43

score 0 · Answer 2 · answered Nov 17 '15 at 15:41

After the object has been clicked, you could remove the click handler until the animation has completed, then re-add it again:

<script>
  $('#nextTabBtn').on('click', handleClick);

  function handleClick(event) {
    console.log("Click");
    $('#nextTabBtn').off('click', handleClick);
    var leftPos = $('.whatever').scrollLeft();
    $(".whatever").animate({scrollLeft: leftPos + 300}, 800, function(){
      console.log("Finished");
      $('#nextTabBtn').on('click', handleClick);
    });
  }
</script>

score 0 · Answer 3 · answered Nov 17 '15 at 17:35

0

You can simply use a setTimeout(function(){/Your code here to halt the click on the button (you can also achieve it by disabling the button)/},10000); //10000 for 10seond

answered Nov 17 '15 at 17:35

Adarsh Mohan

1,364
1
9
14

Second click after animation done (Not a duplicate, not in this context!)

3 Answers3