clearTimeout（timer）不考虑-每次创建新的计时器变量

Question

在我当前正在构建的幻灯片中，我使用计时器变量每4秒自动旋转一次幻灯片。由于还提供了手动控件，因此我想在每次使用控件时重置此计时器，以免在两张幻灯片之间发生任何过早的继承，但没有做到。

我认为这是一个范围问题，但是timer变量不在试图共享它的函数之内（ showSlide（n）和changeSlide（n））。但是每次调用changeSlide函数时都会创建一个全新的计时器变量：每次使用“下一个”控件时，幻灯片自动旋转都会加快，就像多个超时同时在调用该函数一样。这是怎么了？

const slideshows = document.getElementsByClassName("js-slideshow");
[].forEach.call(slideshows, function(slideshow) {
  slideshowlize(slideshow);
});

function slideshowlize(slideshow){
  const desc = slideshow.getElementsByClassName("js-desc");
  const slide = slideshow.getElementsByClassName("js-slide");
  let timer;
  let index = 0;
  const slidePrev = slideshow.querySelector('.js-prev');
  const slideNext = slideshow.querySelector('.js-next');

  function showSlide(n){  
    clearTimeout(timer); // This one is not used yet
    if(n < 0){
      n = slide.length -1;
    }
    else if(n > slide.length -1){
      n = 0;
    }
    let i;
    for(i = 0; i < slide.length; i++){
      slide[i].classList.remove("is-shown");
    }
    for(i = 0; i < desc.length; i++){
      desc[i].classList.remove("is-shown");
    }
    slide[n].classList.add("is-shown");
    desc[n].classList.add("is-shown");
    index = n;
    timer = setTimeout(function(){
      changeSlide(1);
    }, 4000);
  }

  function changeSlide(n){ // this is where the magic doesn't happen
    clearTimeout(timer);
    if (n > 0){
      showSlide(index += 1);
    } else {
      showSlide(index -= 1);
    }
    timer = setTimeout(function(){
      changeSlide(1);
    }, 4000);
  }
  showSlide(index);
  slidePrev.addEventListener('click', function(){
    changeSlide(-1);
  });
  slideNext.addEventListener('click', function(){
    changeSlide(1);
  });
}

编辑：设置了两个不同的计时器。由于showSlide（n）已经重置了计时器，因此changeSlide（n）也无需这样做。感谢Bergi指出来。

     function changeSlide(n){
        //removed "clearTimeout(timer);"
          if (n > 0){
           showSlide(index += 1);
          } else {
           showSlide(index -= 1);
          }
      
        //removed "timer = setTimeout(...);"
      }