javascript - 动画完成后第二次单击(不重复，不在本上下文中!)

Question

有类似的问题，但这是一些不同的问题，我找不到合适的解决方案。

我有简单的滚动功能，效果很好。

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 做到这一点？

Answer 1

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

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