Swiper鼠标悬停暂停自动播放后计时负数问题排查求助

• 问题根源
  移出后计时出现负数，本质是暂停逻辑只停了定时器，但没保存当前剩余计时值；恢复时直接沿用之前的autoplayTimeLeft继续递减，导致暂停期间的隐性数值偏差（比如定时器没彻底清除、剩余值未被锁定）。

• 修正代码逻辑示例
  以下是补全暂停/恢复核心逻辑的代码，适配常见Swiper版本：

  // 全局变量存储定时器、剩余时间与总轮播间隔
  let autoplayTimer = null;
  let remainingTime = 0;
  const totalAutoplayTime = 5000; // 假设轮播间隔为5秒
  let autoplayTimeLeft = totalAutoplayTime;
  
  // 初始化计时定时器
  function startAutoplayTimer() {
    autoplayTimer = setInterval(() => {
      autoplayTimeLeft -= 100;
      // 此处为你的计时UI更新逻辑
      if (autoplayTimeLeft <= 0) {
        swiper.slideNext();
        autoplayTimeLeft = totalAutoplayTime;
      }
    }, 100);
  }
  
  // 鼠标移入暂停逻辑
  function pauseAutoplay() {
    // 暂停Swiper轮播
    swiper.autoplay.stop();
    // 清除定时器并锁定当前剩余时间
    clearInterval(autoplayTimer);
    remainingTime = autoplayTimeLeft;
  }
  
  // 鼠标移出恢复逻辑
  function resumeAutoplay() {
    // 恢复Swiper轮播
    swiper.autoplay.start();
    // 重置计时为暂停时的剩余值，重启定时器
    autoplayTimeLeft = remainingTime;
    startAutoplayTimer();
  }
  
  // 绑定元素事件
  const locationBord = document.querySelector('.locationBord');
  locationBord.addEventListener('mouseenter', pauseAutoplay);
  locationBord.addEventListener('mouseleave', resumeAutoplay);
  

• 关键修正点

  • 暂停时必须用clearInterval彻底清除定时器，同时将当前autoplayTimeLeft存入临时变量，避免数值被意外修改。
  • 恢复时要先把autoplayTimeLeft重置为暂停时的剩余值，再重新创建定时器，不能直接复用旧定时器。
  • 注意Swiper版本差异：旧版Swiper的暂停/恢复方法可能是stopAutoplay()/startAutoplay()，需对应调整。

• 更精准的时间戳实现方案
  若要避免固定间隔递减的累计误差，可改用时间戳计算剩余时间：

  let startTime = Date.now();
  let autoplayTimer = null;
  const totalAutoplayTime = 5000;
  
  function startAutoplayTimer() {
    autoplayTimer = setInterval(() => {
      const elapsed = Date.now() - startTime;
      autoplayTimeLeft = totalAutoplayTime - elapsed;
      if (autoplayTimeLeft <= 0) {
        swiper.slideNext();
        startTime = Date.now();
        autoplayTimeLeft = totalAutoplayTime;
      }
    }, 100);
  }
  
  function pauseAutoplay() {
    swiper.autoplay.stop();
    clearInterval(autoplayTimer);
    const elapsed = Date.now() - startTime;
    remainingTime = totalAutoplayTime - elapsed;
  }
  
  function resumeAutoplay() {
    swiper.autoplay.start();
    startTime = Date.now();
    autoplayTimeLeft = remainingTime;
    startAutoplayTimer();
  }
  

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper