如何正确暂停与恢复基于requestAnimationFrame的JS轮播？

嘿，我来帮你搞定这个轮播的暂停恢复问题！

你遇到的元素冻结情况，通常是这几个核心问题导致的：

• 动画帧ID未正确清理：暂停时没调用cancelAnimationFrame清除正在运行的动画帧，恢复后又启动新的帧请求，多个动画逻辑同时干扰元素状态，最终导致冻结；
• 时间戳记录缺失：requestAnimationFrame依赖时间差计算动画进度，暂停时没记录当前的时间节点，恢复后直接重新计算，要么导致动画跳变，要么因为时间逻辑错误让动画停止；
• 状态不同步：暂停时没同步停止自动切换的定时器，恢复后定时器和动画帧逻辑冲突，让轮播元素的状态陷入混乱。

我整理了一个完整的可暂停恢复的轮播实现，你可以对照自己的代码调整：

// 获取轮播相关元素
const carousel = document.querySelector('.carousel');
const slides = carousel.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const pauseBtn = document.querySelector('.pause-btn');

// 核心状态变量
let animationId = null;       // 存储requestAnimationFrame的ID
let isPaused = false;         // 标记是否暂停
let currentSlideIndex = 0;    // 当前幻灯片索引
const autoSwitchDelay = 3000; // 自动切换间隔
let autoSwitchTimer = null;   // 自动切换定时器ID
let animationStartTime = 0;   // 动画开始时间戳
const slideAnimDuration = 500;// 单张幻灯片切换动画时长

// 幻灯片切换动画函数
function animateSlide(timestamp) {
  if (!animationStartTime) animationStartTime = timestamp;
  // 计算动画进度（0到1，1表示动画完成）
  const progress = Math.min((timestamp - animationStartTime) / slideAnimDuration, 1);
  
  // 这里用translateX实现横向切换，你可以替换成自己的动画逻辑
  const offset = -currentSlideIndex * 100 + (progress * 100);
  carousel.style.transform = `translateX(${offset}%)`;
  
  if (progress < 1) {
    // 动画未完成，继续请求下一帧
    animationId = requestAnimationFrame(animateSlide);
  } else {
    // 动画完成，重置时间戳，启动下一次自动切换（如果未暂停）
    animationStartTime = 0;
    if (!isPaused) {
      autoSwitchTimer = setTimeout(switchToNextSlide, autoSwitchDelay);
    }
  }
}

// 切换到下一张幻灯片
function switchToNextSlide() {
  // 先清除之前的动画帧和定时器，避免冲突
  cancelAnimationFrame(animationId);
  clearTimeout(autoSwitchTimer);
  
  currentSlideIndex = (currentSlideIndex + 1) % slides.length;
  animationStartTime = 0;
  animationId = requestAnimationFrame(animateSlide);
}

// 切换到上一张幻灯片
function switchToPrevSlide() {
  cancelAnimationFrame(animationId);
  clearTimeout(autoSwitchTimer);
  
  currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
  animationStartTime = 0;
  animationId = requestAnimationFrame(animateSlide);
}

// 暂停/恢复轮播
function togglePause() {
  isPaused = !isPaused;
  pauseBtn.textContent = isPaused ? '恢复' : '暂停';
  
  if (isPaused) {
    // 暂停时同时清除动画帧和自动切换定时器
    cancelAnimationFrame(animationId);
    clearTimeout(autoSwitchTimer);
  } else {
    // 恢复时根据当前状态处理
    if (animationStartTime !== 0) {
      // 如果之前动画未完成，计算已流逝时间，让动画从暂停位置继续
      const elapsedTime = Date.now() - animationStartTime;
      animationStartTime = Date.now() - elapsedTime;
      animationId = requestAnimationFrame(animateSlide);
    } else {
      // 动画已完成，直接启动下一次自动切换
      autoSwitchTimer = setTimeout(switchToNextSlide, autoSwitchDelay);
    }
  }
}

// 绑定事件监听
prevBtn.addEventListener('click', switchToPrevSlide);
nextBtn.addEventListener('click', switchToNextSlide);
pauseBtn.addEventListener('click', togglePause);

// 初始化启动自动切换
autoSwitchTimer = setTimeout(switchToNextSlide, autoSwitchDelay);

• 严格管理动画帧ID：每次启动新动画前，必须用cancelAnimationFrame清除之前的animationId，防止多个动画逻辑同时运行；
• 时间戳同步：暂停时记录已流逝的时间，恢复时重置animationStartTime，让动画从暂停的位置继续，而不是从头开始；
• 状态统一：暂停时同时停止自动切换定时器，恢复时根据当前是否在动画中，决定是继续动画还是启动定时器；
• 进度计算逻辑：用(timestamp - animationStartTime)/slideAnimDuration计算动画进度，确保动画平滑过渡，不会出现跳变或冻结。

你可以把自己的代码和这个示例对比，检查是否遗漏了这些关键点，应该就能解决冻结的问题了。

内容的提问来源于stack exchange，提问作者Steffen Laurens