当我单击图像滑块上的导航点时，为什么我的jQuery滑块会生气？

Question

我有以下代码来制作带有导航点的图像滑块，但是当我点击这些点时它们会发疯，并且不遵守我启用的4秒计时器。

当页面加载时，它可以正常工作，并完美地滑动图像。只有当我点击导航点时，它才会超快地移动到下一个导航点。

我做错了什么？在反思时，我可能需要在点击导航点时终止计时器，但我该怎么做？

        $(".left-arrow").hide();


        var numImgs = $('div.carousel-image-holder img').length;
        var addId = numImgs;

        if (numImgs == 2) {
          var clicked = 0;
          imgCount = numImgs - 2;
        } else if (numImgs <= 1) {
          $(".right-arrow").hide();
        } else {
          var clicked = 1;
          imgCount = numImgs - 1;
        }

         if (numImgs > 2) {
          for (var i = 0; i < numImgs; i++) {
            $("ul").prepend('<li class="carousel-buttons" id="carousel' + addId + '"></li>');
            var addId = addId - 1;
          }
        } else {

        }

        function goToSlide(slideNo) {

          $(".carousel-buttons").removeClass("active");
          $("#carousel" + slideNo).addClass("active");

          clicked = parseInt(slideNo);
          var adjustNumberforSlide = slideNo - 1;

          $(".carousel-image-holder").animate({
            "left": -(600 * adjustNumberforSlide) + "px"
          });

          console.log(clicked);

          if (slideNo == 1) {
            $(".left-arrow").hide();
            $(".right-arrow").show();
          } else if (slideNo == numImgs) {
            $(".right-arrow").hide();
            $(".left-arrow").show();
          } else {
            $(".right-arrow").show();
            $(".left-arrow").show();
          }

          // Set timeout to go to next slide (4 seconds)
          setTimeout(function() {
            goToSlide((clicked < numImgs ? clicked + 1 : 1));
          }, 4000);

        }

        $(".carousel-buttons").click(function() {

          var findIdClicked = $(this).attr("id");
          var splitString = findIdClicked.split("carousel")
          var findTheNumb = splitString[1];

          goToSlide(findTheNumb);

        });

        $(".carousel-buttons-container").find("li").first().addClass("active");

        $(".right-arrow").click(function() {

          if (clicked < imgCount) {

            $(".carousel-image-holder").animate({
              "left": "-=600px"
            });

            console.log(clicked);

          } else {

            $(".carousel-image-holder").animate({
              "left": "-=600px"
            });
            $(".right-arrow").hide();

            console.log(clicked);
          }

          clicked = clicked + 1;
          $(".left-arrow").show();
          $(".carousel-buttons").removeClass("active");
          $("#carousel" + clicked).addClass("active");

        });

        $(".left-arrow").click(function() {

          if (clicked > 2) {

            $(".carousel-image-holder").animate({
              "left": "+=600px"
            });

            console.log(clicked);

          } else {

            $(".carousel-image-holder").animate({
              "left": "+=600px"
            });
            $(".left-arrow").hide();

            console.log(clicked);

          }

          $(".right-arrow").show();
          clicked = clicked - 1;
          $(".carousel-buttons").removeClass("active");
          $("#carousel" + clicked).addClass("active");

        });

         // Start timer
        goToSlide(clicked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-container">
  <div class="left-arrow"></div>
  <div class="right-arrow"></div>
  <div class="carousel-image-holder">
    <img src="education/make-a-booking.jpg" />
    <img src="education/make-a-booking.jpg" />
    <img src="ducation/make-a-booking.jpg" />
    <img src="education/make-a-booking.jpg" />
    <img src="education/make-a-booking.jpg" />
    <img src="education/make-a-booking.jpg" />
  </div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
  <ul>

  </ul>
</div>

Answer 1

单击按钮时，需要在开始新循环之前清除旧循环。为此使用clearTimeout，并将id存储在全局变量中。

  // Set timeout to go to next slide (4 seconds)
  window.currentLoop = setTimeout(function() { // save the timer
    goToSlide((clicked < numImgs ? clicked + 1 : 1));
  }, 4000);
}

$(".carousel-buttons").click(function() {

  var findIdClicked = $(this).attr("id");
  var splitString = findIdClicked.split("carousel")
  var findTheNumb = splitString[1];

  clearTimeout(window.currentLoop); // clear the old timer
  goToSlide(findTheNumb);
});

https://jsfiddle.net/cqn67z1n/