单击点按钮后，JavaScript滑块循环过快

我为JavaScript图像滑块编写了以下代码：

<div class="container"> 
<!-- Full-width images with caption text -->
  <div class="image-sliderfade fade"> 
    <img src="https://via.placeholder.com/150" style="width:100%"> 
    <div class="text">Image caption 1</div> 
  </div> 

  <div class="image-sliderfade fade"> 
    <img src="https://via.placeholder.com/150" style="width:100%"> 
    <div class="text">Image caption 2</div> 
  </div> 

  <div class="image-sliderfade fade"> 
    <img src="https://via.placeholder.com/150" style="width:100%"> 
    <div class="text">Image caption 3</div> 
  </div> 

  <div class="image-sliderfade fade"> 
    <img src="https://via.placeholder.com/150" style="width:100%"> 
    <div class="text">Image caption 4</div> 
  </div> 

</div> 
<!-- The dots/circles -->
<div style="text-align:center"> 
  <span class="dot" onclick="currentSlide(1)"></span>  
  <span class="dot" onclick="currentSlide(2)"></span>  
  <span class="dot" onclick="currentSlide(3)"></span>  
  <span class="dot" onclick="currentSlide(4)"></span>  
</div>

图片说明1
图片说明2
图片说明3
图片说明4

Js代码是：

<script type="text/javascript">  
var slideIndex = 0; 
showSlides(); // call showslide method 

function currentSlide(n) {
  console.log(n);
  showSlides(slideIndex = n);
}
   
function showSlides( n ) { 
  var i; 
  var slides = document.getElementsByClassName("image-sliderfade");  
  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {
    slideIndex = 1;
  }    

  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) { 
      slides[i].style.display = "none";  
  } 

  if(!n) {
    slideIndex++;  
  }

  if (slideIndex > slides.length){ 
      slideIndex = 1; 
  } 

  for (i = 0; i < dots.length; i++) { 
      dots[i].className = dots[i].className.replace(" active", ""); 
  } 

  slides[slideIndex - 1].style.display = "block"; 
  dots[slideIndex - 1].className += " active"; 

  setTimeout(showSlides, 3000);  
} 
</script>  

var slideIndex=0；
showSlides（）；//调用showslide方法
功能当前幻灯片（n）{
控制台日志（n）；
放映幻灯片（幻灯片索引=n）；
}
函数showSlides（n）{
var i；
var slides=document.getElementsByClassName（“图像sliderfade”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1；
}    
if（n<1）{
slideIndex=slides.length；
}
对于（i=0；islides.length）{
slideIndex=1；
} 
对于（i=0；i

它会自动循环，我想在单击事件时转到特定的滑块。现在，如果我用点点击一个特定的滑块，那么滑块的循环速度太快了

---

我有什么错吗？我怎样才能修复它呢？

为什么它一直在加速p是因为你一直在添加越来越多的计时器。您需要取消单击时可能存在的计时器

var sliderTimer;
function currentSlide(n) {
  console.log(n);
  if (sliderTimer) window.clearTimeout(sliderTimer);
  showSlides(slideIndex = n);
}

当你创建计时器的时候

sliderTimer = setTimeout(showSlides, 3000);  

---

如果计时器在currentSlide中存在，您需要取消它。请使用clearTimeout（）@epascarello我正在检查它。@robert我使用了

clearTimeout（）

，但是它的循环速度很快，而不是3秒后。@epascarello它似乎在工作：）您能检查一下吗：？此行

console.log（slideIndex）显示的是5项而不是4项