Expo项目中setInterval在多平台(web/Expo Go/APK)执行速度不一致问题求解

• setInterval属于非精准定时器，执行时机受JS事件循环阻塞、系统进程调度优先级影响：Expo Go开发模式内置大量调试逻辑，会加重JS线程阻塞，导致定时器执行越来越滞后；正式APK关闭调试逻辑后JS线程调度优先级更高，会出现回调提前触发、间隔小于1s的现象，属于React Native端JS层定时器的共性问题。
• 现有代码中连续触发两次状态更新，且使用JSON.parse(JSON.stringify)做数组拷贝性能损耗大，额外的重渲染会进一步放大定时器执行偏差。

1. 替换为动态校准的自调度定时器 #

放弃固定间隔的setInterval，每次执行时计算当前时间和预期执行时间的偏差，动态调整下一次定时器的延时，从逻辑层面自动修正偏移：

import React, { useEffect, useState } from "react";
import {Text,Button, View} from 'react-native';
export default function Home(props){
    const [timerCount, setTimer] = useState(parseInt(props.time))
    const [timepair,setTimePair] = useState([[0,0]])
    const [start,setStart] = useState(false)

    useEffect(() => {
        let timer = null;
        // 记录下一次的预期执行时间
        let nextExpectTime = Date.now() + 1000;

        const timerTask = () => {
            // 批量更新状态减少重渲染
            setTimer(last => last === 0 ? props.time : last - 1);
            setTimePair(last => {
                // 替换深拷贝为浅拷贝，减少性能损耗
                const newPair = [...last];
                newPair.push([newPair[newPair.length - 1][0] + 1, Date.now()]);
                return newPair;
            });

            // 计算当前偏差，动态调整下一次的延时
            const drift = Date.now() - nextExpectTime;
            nextExpectTime += 1000;
            timer = setTimeout(timerTask, Math.max(0, 1000 - drift));
        }

        // 启动第一次定时任务
        timer = setTimeout(timerTask, 1000);
        return () => clearTimeout(timer);
    }, []);

    return (
        <View>
            <Text>{timerCount}</Text>
            <Text>{timepair[timepair.length-1]} </Text>
            <Button title = "start" onPress = {()=>setStart(prev => !prev)}/>
            <Text>{String(start)}</Text>
        </View>
    )
}

该方案可将定时器的长期偏移控制在10ms以内，完全覆盖普通业务的精度要求。

2. 高精度场景使用原生定时器 #

如果是秒表、精准倒计时等对时间精度要求极高的业务，直接调用原生层定时器能力，完全规避JS线程调度的影响：

• Android端使用AlarmManager实现定时回调
• iOS端使用NSTimer实现定时回调
• Expo生态可直接使用封装好的原生定时器模块，无需自己编写原生代码

3. 正式包性能优化配置 #

在app.json中开启Hermes引擎，可大幅提升JS线程执行和调度的稳定性，进一步降低定时器偏差：

{
  "expo": {
    "android": {
      "jsEngine": "hermes"
    },
    "ios": {
      "jsEngine": "hermes"
    }
  }
}

配置完成后重新执行expo build:android -t apk编译测试即可。

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