为什么当我非常快速地单击箭头控件图标时，此jQuery滑块消失了

Question

我在这个jquery滑块中遇到了一些疯狂的问题。

当我慢慢单击箭头控件时，它工作得很好

但是当我快速单击任何箭头控件时，整个div 部分消失了，但它仍然存在于源代码中

你能帮我解决这个问题吗？

完整代码在这里：

// Check testimonials
var leftArrow = $('.testimonials .fa-chevron-left'),
  rightArrow = $('.testimonials .fa-chevron-right');
function checkClients() {
  if ($('.client:first').hasClass('active')) {
    leftArrow.fadeOut();
  } else {
    leftArrow.fadeIn();
  }
  if ($('.client:last').hasClass('active')) {
    rightArrow.fadeOut();
  } else {
    rightArrow.fadeIn();
  }
}
checkClients();
$('.testimonials i').click(function() {
  if ($(this).hasClass('fa-chevron-right')) {
    $('.testimonials .active').fadeOut(400, function() {
      $(this).removeClass('active').next('.client').addClass('active').fadeIn();
      checkClients();
    });
  } else {
    $('.testimonials .active').fadeOut(400, function() {
      $(this).removeClass('active').prev('.client').addClass('active').fadeIn();
      checkClients();
    });
  }
});

.testimonials {
  background: url('../images/testimonials.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.testimonials .client {
  padding: 50px 0;
  color: #FFF;
  font-size: 20px;
}
.testimonials .client img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.testimonials .client p {
  line-height: 2;
  font-style: italic;
}
.testimonials .fa-chevron-right,
.testimonials .fa-chevron-left {
  position: absolute;
  top: 50%;
  color: #FFF;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.testimonials .fa-chevron-right:hover,
.testimonials .fa-chevron-left:hover {
  color: #f7600e;
}
.testimonials .fa-chevron-right {
  right: 0;
}
.testimonials .fa-chevron-left {
  left: 0;
}

<div class="testimonials text-center">
  <div class="overlay">
    <div class="container">
      <div class="client active">
        <img src="images/client.jpg" alt="">
        <p>
          These guys are incredible! I get my project in 10 days and it was awesome!
          <br>Very good service! Highly recommended!
        </p>
        <span>John Smith</span>
      </div>
      <div class="client hidden">
        <img src="images/client.jpg" alt="">
        <p>
          These guys are incredible! I get my project in 10 days and it was awesome!
          <br>Very good service! Highly recommended!
        </p>
        <span>Wael Assaf</span>
      </div>
      <div class="client hidden">
        <img src="images/client.jpg" alt="">
        <p>
          These guys are incredible! I get my project in 10 days and it was awesome!
          <br>Very good service! Highly recommended!
        </p>
        <span>Sofya Bedal</span>
      </div>
      <div class="client hidden">
        <img src="images/client.jpg" alt="">
        <p>
          These guys are incredible! I get my project in 10 days and it was awesome!
          <br>Very good service! Highly recommended!
        </p>
        <span>Tata</span>
      </div>
      <i class="fa fa-chevron-right fa-2x"></i>
      <i class="fa fa-chevron-left fa-2x"></i>
    </div>
  </div>
</div>

谢谢大家！

Answer 1

你还有一个额外的 }(;在那里，我认为这可能会导致问题

$('.testimonials i').click(function() {

if ($(this).hasClass('fa-chevron-right')) {
    $('.testimonials .active').fadeOut(400, function() {
      $(this).removeClass('active').next('.client').addClass('active').fadeIn();
      checkClients();
    });
  } else {
    $('.testimonials .active').fadeOut(400, function() {
      $(this).removeClass('active').prev('.client').addClass('active').fadeIn();
      checkClients();
    });
  }
});