CODEWITHSUNDEEP
javascripthtmljquery
Dmitriy Shevchenko
Dmitriy Shevchenko

Reputation: 29

Button click only after time limit

I'm trying to make the button (number__copy__button) work only when the animation (copy__animation) ends.

So that there are no spam clicks, because the animation will over-loop and will run several times after you press the button (number__copy__button).

My question is:

Can I somehow make this button (number__copy__button) un-pressable until animation (copy__animation) ends?

// ••• Copy Text Animation Fade In •••

$(".number__copy__button").click(function() {
  $(".copy__animation").fadeIn(200).delay(2500).fadeOut(200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="number__copy__button"></button>

<div class="copy__animation">
  Number Copied
</div>

Upvotes: 1

Views: 53

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

You could set a lock and unlock it after the fade-out transition ends.

The .fadeOut() method takes an optional second parameter of complete.

// ••• Copy Text Animation Fade In •••

class Lock {
  constructor() { this.__locked = false; }
  isLocked()    { return this.__locked;  }
  unlock()      { this.__locked = false; }
  lock()        { this.__locked = true;  }
}

const copyLock = new Lock();

$('.number__copy__button').click(() => {
  if (!copyLock.isLocked()) {
    console.log('COPY BEGIN');
    copyLock.lock();
    $('.copy__animation').fadeIn(200).delay(2500).fadeOut(200, () => {
      copyLock.unlock();
      console.log('COPY END');
    });
  }
});
.copy__animation { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="number__copy__button">Copy</button>
<div class="copy__animation">Number Copied</div>

Alternatively, you could set a data attribute:

$('.number__copy__button').click(function() {
  var $copyBtn = $(this);
  if ($copyBtn.data('locked') === undefined) {
    console.log('COPY BEGIN');
    $copyBtn.data('locked', true);
    $('.copy__animation').fadeIn(200).delay(2500).fadeOut(200, function() {
      $copyBtn.removeData('locked');
      console.log('COPY END');
    });
  }
});
.copy__animation { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="number__copy__button">Copy</button>
<div class="copy__animation">Number Copied</div>

Upvotes: 3

Dr M L M J
Dr M L M J

Reputation: 2397

you can try like this. (not tested)

$(function() {
      $(".number__copy__button").click(function(){
           $(".number__copy__button").attr("disabled", "disabled");
           $(".copy__animation").fadeIn(200).delay(2500).fadeOut(200);

       setTimeout(function() {
             $(".number__copy__button").removeAttr("disabled");      
        }, 3000);// enabled after 3 seconds
        });
 });

Upvotes: 0

Related Questions