React中如何实现计时器自动停止？示例：进度值达100时停止

你的组件当前会持续累加progress值，要实现进度到100时停止计时器，需要在更新进度的逻辑里增加判断，并且在达到条件后清除定时器。核心要解决两个点：判断进度是否达标和正确获取定时器引用以清除（避免闭包问题）。

修改后的完整代码 #

import React, { useEffect, useRef } from 'react';
import { Box } from '@mui/material';
import LinearProgressWithLabel from './LinearProgressWithLabel'; // 假设你已定义该组件

export const SliderComponent = ({ progress, setProgress }) => {
  // 用useRef保存定时器引用，避免闭包导致无法正确清除
  const timerRef = useRef(null);

  useEffect(() => {
    // 如果初始进度已经是100，直接不启动定时器
    if (progress >= 100) return;

    timerRef.current = setInterval(() => {
      setProgress((prevProgress) => {
        const newProgress = prevProgress + 30;
        // 判断是否达到或超过100
        if (newProgress >= 100) {
          // 清除定时器
          clearInterval(timerRef.current);
          return 100;
        }
        return newProgress;
      });
    }, 1100);

    // 组件卸载时清除定时器
    return () => {
      clearInterval(timerRef.current);
    };
  }, [progress, setProgress]); // 依赖加入progress，确保进度变化时重新判断

  return (
    <Box sx={{ width: '100%' }}>
      <LinearProgressWithLabel value={progress} />
    </Box>
  );
};

关键修改说明 #

• 用useRef存定时器：因为useEffect的回调是闭包，直接引用timer变量会拿到初始值，用ref可以保存最新的定时器实例，确保能正确清除。
• 进度判断逻辑：在setProgress的函数式更新回调里计算新进度，一旦达到或超过100，就清除定时器并把进度设为100（避免超过100的情况）。
• 依赖数组优化：把progress加入useEffect的依赖，确保如果外部修改了progress（比如重置），组件能重新判断是否需要启动定时器。
• 初始状态判断：如果传入的progress一开始就是100，直接跳过定时器启动逻辑。

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