Javascript 动画完成后再次单击（不是重复，不在此上下文中！）

有类似的问题，但这是一些不同的，我无法找到一个适当的解决办法

我有简单的滚动功能，它工作得很好

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>

只有在动画完成后，才能进行第二次单击。用户可能不会在btn上点击10次。他必须等待第二次点击

---

如何使用jQuery实现这一点？

有几种方法可以实现您想要的功能，我通常是这样做的：

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

---

单击对象后，可以删除单击处理程序，直到动画完成，然后再次添加：

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

$（'nextTabBtn'）。在（'click'，handleClick）上；
函数handleClick（事件）{
控制台日志（“单击”）；
$（'nextTabBtn'）.off（'click'，handleClick）；
var leftPos=$（'.whatever'）.scrollLeft（）；
$（“.whatever”）.animate（{scrollLeft:leftPos+300}，800，function（）{
控制台日志（“完成”）；
$（'nextTabBtn'）。在（'click'，handleClick）上；
});
}

您可以简单地使用setTimeout（函数（）{/Your code here to stop the click on the button（您也可以通过禁用按钮来实现）/}，10000）//10000次/10seond

你可以通过

addClas

和

removeClass

来实现。禁用：真/假？在你的动画周围包装一个if不知道jquery是否有内置的东西，但是你可以在它制作动画时使用setTimeout来禁用click函数，因为你知道最长时间，这应该很容易实现！非常感谢。它工作完美，是一个非常优雅的解决方案！谢谢，它也起作用了。。