JavaScript自动轮播图setInterval无法多次停止的问题求助

需求：实现图片自动轮播器，鼠标悬停轮播区域时停止轮播，离开后恢复轮播。
问题：第一次悬停可停止轮播，再次悬停时无法停止。

原代码 #

HTML #

<div class="slider-wrapper">
    <ul class="slider">
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/07/31/20/32/vintage-bus-7356817_960_720.jpg" alt="">
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/04/20/00/09/flowers-7143991_960_720.jpg" alt="">
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/03/26/15/17/cornelian-cherry-7093063_960_720.jpg" alt="">
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2013/08/20/15/47/poppies-174276_960_720.jpg" alt="">
        </li>
        <li>
            <img class="image" src="https://cdn.pixabay.com/photo/2022/07/25/16/41/child-7344169_960_720.jpg"
                alt="">
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2021/08/08/22/41/flowers-6532105_960_720.jpg" alt="">
        </li>
    </ul>
</div>

JavaScript #

const slider = document.querySelector(".slider");
const sliderWrapper = document.querySelector(".slider-wrapper");

let currentSlide = 0;

function nextSlide(slide) {
  Array.from(slider.children).forEach((item, index) => {
    item.style.transform = `translateX(${100 * (index - slide)}%)`;
  });
}

nextSlide(0); // initial slide on mounted

var stopSliding = null;

function startAutoSliding() {
  stopSliding = setInterval(() => {
    console.log("Next Clicked");
    currentSlide++;
    if (currentSlide >= 0 && currentSlide < slideLength) {
      nextSlide(currentSlide);
    } else {
      currentSlide = 0;
      nextSlide(currentSlide);
    }
    console.log(currentSlide);
  }, 4000);
}

sliderWrapper.addEventListener("mouseover", (event) => {
  console.log("mouseover");
  event.stopPropagation();
  clearInterval(stopSliding);
});

sliderWrapper.addEventListener("mouseleave", (event) => {
  event.stopPropagation();
  console.log("mouseleave");
  startAutoSliding();
  stopSliding = null;
});
startAutoSliding();

问题原因 #

1. 定时器ID丢失：mouseleave事件中调用startAutoSliding()后立刻执行stopSliding = null，导致下次mouseover触发时，clearInterval(null)无法清除正在运行的定时器——因为定时器的唯一标识已经被清空。
2. 未定义边界变量：代码中slideLength未声明，轮播边界判断逻辑会直接失效，引发额外的运行错误。

修复后的代码 #

JavaScript #

const slider = document.querySelector(".slider");
const sliderWrapper = document.querySelector(".slider-wrapper");

let currentSlide = 0;
// 定义轮播项总数，修复边界判断
const slideLength = slider.children.length;

function nextSlide(slide) {
  Array.from(slider.children).forEach((item, index) => {
    item.style.transform = `translateX(${100 * (index - slide)}%)`;
  });
}

nextSlide(0); // 初始化轮播位置

let stopSliding = null;

function startAutoSliding() {
  // 启动前先清除已有定时器，防止重复创建
  if (stopSliding) {
    clearInterval(stopSliding);
  }
  stopSliding = setInterval(() => {
    currentSlide++;
    if (currentSlide < slideLength) {
      nextSlide(currentSlide);
    } else {
      currentSlide = 0;
      nextSlide(currentSlide);
    }
  }, 4000);
}

sliderWrapper.addEventListener("mouseover", () => {
  clearInterval(stopSliding);
});

sliderWrapper.addEventListener("mouseleave", () => {
  startAutoSliding();
  // 移除stopSliding = null，保留定时器ID供后续清除使用
});

startAutoSliding();

关键修改点 #

• 删除mouseleave中的stopSliding = null，确保定时器ID始终有效，下次悬停时能正确终止轮播。
• 新增slideLength变量，获取轮播项的实际数量，修复边界判断逻辑。
• 在startAutoSliding中添加前置清除逻辑，避免多次触发mouseleave时创建多个并行定时器。

内容的提问来源于stack exchange，提问作者Primer Cielo