React Native中使用setInterval定时校验特定时间的实现方案咨询

基础实现（前台运行场景） #

该方案基于setInterval实现，仅在APP前台运行时生效，适合仅需APP打开状态下触发提醒的场景：

import { useEffect, useRef } from 'react';
import { Alert } from 'react-native';

const TimeCheckModule = () => {
  // 存储触发标记，避免同个时间点重复弹窗
  const hasTriggered = useRef(false);

  useEffect(() => {
    const timeCheck = () => {
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      // 校验是否到达目标时间12:00且未触发过提醒
      if (hour === 12 && minute === 0 && !hasTriggered.current) {
        Alert.alert('时间提醒', '已到中午12:00');
        hasTriggered.current = true;
        // 若需要次日重复提醒，可新增逻辑在每日0点重置hasTriggered.current为false
      }
    }
    // 组件挂载时先执行一次校验，避免刚进入页面刚好到点漏触发
    timeCheck();
    // 启动每分钟执行的定时器
    const timer = setInterval(timeCheck, 60 * 1000);
    // 组件卸载时清除定时器，规避内存泄漏
    return () => clearInterval(timer);
  }, [])

  return <></>
}

export default TimeCheckModule;

注意事项 #

• 内存泄漏规避：必须在组件卸载生命周期中调用clearInterval清除定时器，否则会导致内存泄漏，出现异常触发的问题。
• 重复触发规避：通过useRef存储触发状态标记，避免同一个时间点重复弹出提示。如果需要每日重复提醒，可以新增逻辑在每日0点重置标记位。
• 后台运行适配：如果需要APP切后台也能触发提醒，单纯的JS端setInterval无法实现，因为APP后台时JS线程会被系统挂起，定时器暂停执行。这种场景建议调用原生本地通知能力，注册定时触发的系统通知即可，不需要自己实现轮询逻辑。
• 误差处理：setInterval受JS线程阻塞影响可能存在几秒内的误差，对精度要求极高的场景可以把轮询间隔缩短到10秒，同时保留触发标记避免重复执行，成本更低。

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