javascript - 按钮仅在时间限制后单击

Question

我试图使按钮（number__copy__button）仅在动画（copy__animation）结束时才起作用。

这样就不会出现垃圾点击，因为动画会在您按下按钮 ( ) 后过度循环并运行多次number__copy__button。

我的问题是：

我可以以某种方式使此按钮 ( ) 在动画 ( ) 结束number__copy__button之前不可按下吗？copy__animation

// ••• 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>

标签： javascripthtmljquery

Answer 1

您可以在淡出过渡结束后设置锁定并解锁。

该.fadeOut()方法采用可选的第二个参数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>

或者，您可以设置数据属性：

$('.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>