React Native Expo杀后台重启后setInterval加速问题求助

使用React Native Expo开发秒表，通过AsyncStorage实现后台/应用被杀后继续计时，但启动秒表后杀后台再重启，秒表速度会比正常快。点击停止再启动后恢复正常，核心问题是clearInterval的使用位置不对。

原代码：

const [isRunning, setIsRunning] = useState(false);
const [time, setTime] = useState(0);

const intervalRef = useRef(null);

const handleStartButtonPress = async () => {
    setIsRunning(!isRunning);
};

useEffect(() => {
    console.log("started: ", started);
    
    if (isRunning) {
        intervalRef.current = setInterval(() => {
            setTime(previousTime => previousTime + 100);
        }, 100);
    } else {
        clearInterval(intervalRef.current);
    }

    return () => clearInterval(intervalRef.current);
    
}, [isRunning]);

原因分析 #

应用被杀后台重启时，useState的初始值会重置为0，但之前的定时器可能未被正确清除（应用直接被杀死时，组件卸载的清理函数不一定能执行）。重启后如果从AsyncStorage恢复isRunning为true，会再次创建新定时器，导致多个定时器同时触发setTime，让计时速度翻倍。

解决步骤 #

1. 初始化时清除残留定时器：组件启动读取AsyncStorage状态前，先执行clearInterval，避免旧定时器后台运行。
2. 优化定时器创建逻辑：每次创建新定时器前，强制清除之前的定时器，防止叠加。
3. 正确恢复状态：启动时从AsyncStorage读取之前保存的运行状态和时间，而非使用默认值。

修改后的代码示例：

import { useState, useEffect, useRef } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Stopwatch = () => {
    const [isRunning, setIsRunning] = useState(false);
    const [time, setTime] = useState(0);
    const intervalRef = useRef(null);

    // 初始化恢复状态并清除旧定时器
    useEffect(() => {
        const loadState = async () => {
            const savedIsRunning = await AsyncStorage.getItem('isRunning');
            const savedTime = await AsyncStorage.getItem('time');
            
            // 强制清除可能存在的旧定时器
            clearInterval(intervalRef.current);
            
            if (savedIsRunning === 'true') {
                const currentTime = savedTime ? parseInt(savedTime) : 0;
                setTime(currentTime);
                setIsRunning(true);
            } else {
                setTime(savedTime ? parseInt(savedTime) : 0);
            }
        };
        loadState();
    }, []);

    // 实时保存状态到AsyncStorage
    useEffect(() => {
        const saveState = async () => {
            await AsyncStorage.setItem('isRunning', isRunning.toString());
            await AsyncStorage.setItem('time', time.toString());
        };
        saveState();
    }, [isRunning, time]);

    // 定时器核心逻辑
    useEffect(() => {
        // 先清除之前的定时器，再判断是否创建新的
        clearInterval(intervalRef.current);
        
        if (isRunning) {
            intervalRef.current = setInterval(() => {
                setTime(prev => prev + 100);
            }, 100);
        }

        return () => clearInterval(intervalRef.current);
    }, [isRunning]);

    const handleStartButtonPress = () => {
        setIsRunning(!isRunning);
    };

    return (
        {/* 此处放置你的秒表UI组件 */}
    );
};

export default Stopwatch;

关键改进点 #

• 初始化强制清定时器：应用重启后第一时间清除可能残留的旧定时器，避免后台计时叠加。
• 创建前先清旧定时器：每次isRunning状态变化时，先清除之前的定时器，再决定是否创建新的，从根源避免多定时器共存。
• 状态连贯性保障：启动时从AsyncStorage读取历史状态，保证秒表计时的连续性。

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