React中如何实现鼠标悬停时暂停进度条动画？

你的图片轮播组件无法在鼠标悬停时暂停，核心问题集中在定时器管理和进度条动画控制两部分，具体问题点及修复方案如下：

1. 定时器未正确启停 #

如果自动切换依赖setInterval实现，若存在以下情况会导致暂停失效：

• 未将定时器ID存入引用/状态，无法在悬停时精准清除
• 鼠标事件监听绑定到错误DOM元素，未触发启停逻辑
• 重新启动定时器时重复创建实例，导致切换逻辑混乱

修复示例：

import { useState, useRef, useEffect } from 'react';

const Slider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const sliderRef = useRef<HTMLDivElement>(null);
  const delay = 3000;
  const images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; // 示例图片列表

  // 启动自动播放
  const startAutoPlay = () => {
    timerRef.current = setInterval(() => {
      setCurrentIndex(prev => (prev + 1) % images.length);
    }, delay);
  };

  // 停止自动播放
  const stopAutoPlay = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  // 绑定鼠标事件监听
  useEffect(() => {
    const sliderEl = sliderRef.current;
    if (sliderEl) {
      sliderEl.addEventListener('mouseenter', stopAutoPlay);
      sliderEl.addEventListener('mouseleave', startAutoPlay);
    }

    startAutoPlay();

    // 组件卸载时清理
    return () => {
      stopAutoPlay();
      if (sliderEl) {
        sliderEl.removeEventListener('mouseenter', stopAutoPlay);
        sliderEl.removeEventListener('mouseleave', startAutoPlay);
      }
    };
  }, []);

  // 轮播渲染逻辑
  return (
    <div ref={sliderRef} className="slider-container">
      <img src={images[currentIndex]} alt={`Slide ${currentIndex + 1}`} />
      <div className="progress-bar"></div>
    </div>
  );
};

2. 进度条动画未同步暂停 #

如果底部进度条用CSS动画实现，需在悬停时暂停动画状态：
CSS修复示例：

.slider-container {
  position: relative;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: #4285F4;
  animation: progress 3s linear infinite;
}

/* 悬停时暂停进度条动画 */
.slider-container:hover .progress-bar {
  animation-play-state: paused;
}

@keyframes progress {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

若进度条通过JS动态更新宽度，需确保进度更新的定时器和轮播切换定时器同步启停，保持状态一致。

3. 状态同步逻辑缺失 #

若使用isPaused状态控制播放，需保证状态变更后，定时器和进度条能立即响应：

const [isPaused, setIsPaused] = useState(false);

// 结合状态控制启停
useEffect(() => {
  if (isPaused) {
    stopAutoPlay();
    // 暂停进度条动画的额外逻辑（如JS控制时更新进度状态）
  } else {
    startAutoPlay();
    // 恢复进度条动画
  }
}, [isPaused]);

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