JavaScript（React Hooks）中如何实现两个独立if条件的计时器同时运行？

核心问题根因 #

当前代码的执行逻辑存在两处硬伤：

• useEffect 回调内命中第一个 if (isLoggedIn) 分支后，会直接返回该分支的清理函数，整个effect回调终止，后续的休息计时逻辑永远不会被执行，两个计时被强行做成了互斥分支
• 原代码引用了未定义的 onlineTime、auxTime 变量，和已声明的 loginTime、breakTime 状态不匹配；且useEffect未配置依赖数组，会在任意状态变化时重置所有定时器，导致计时跳变、内存泄漏

修复实现 #

要实现两个计时完全独立同步运行，推荐用拆分独立useEffect的方案，逻辑完全解耦，后续维护成本更低：

import { useState, useEffect } from 'react';

const [isLoggedIn, setLoggedIn] = useState(true);
const [isBreakPunched, setBreakPunch] = useState(true);
const [breakTime, setBreakTime] = useState(0);
const [loginTime, setLoginTime] = useState(0);

// 登录时长独立计时逻辑
useEffect(() => {
  // 未登录时不启动定时器
  if (!isLoggedIn) return;
  const loginTimer = setInterval(() => {
    // 用函数式更新避免闭包捕获旧状态值
    setLoginTime(prev => prev + 1);
  }, 1000);
  // 状态变化或组件卸载时清理定时器
  return () => clearInterval(loginTimer);
}, [isLoggedIn]);

// 休息时长独立计时逻辑，和登录计时完全无干扰
useEffect(() => {
  if (!isBreakPunched) return;
  const breakTimer = setInterval(() => {
    setBreakTime(prev => prev + 1);
  }, 1000);
  return () => clearInterval(breakTimer);
}, [isBreakPunched]);

替代方案（单useEffect实现） #

如果不想拆分多个effect，可以在同一个回调内分别初始化两个独立定时器，不要提前return，最后统一清理所有已创建的定时器：

useEffect(() => {
  let loginTimer = null;
  let breakTimer = null;

  // 满足登录条件时启动登录计时
  if (isLoggedIn) {
    loginTimer = setInterval(() => {
      setLoginTime(prev => prev + 1);
    }, 1000);
  }

  // 满足休息打卡条件时启动休息计时，不会被上层逻辑打断
  if (isBreakPunched) {
    breakTimer = setInterval(() => {
      setBreakTime(prev => prev + 1);
    }, 1000);
  }

  // 统一清理所有定时器，避免泄漏
  return () => {
    loginTimer && clearInterval(loginTimer);
    breakTimer && clearInterval(breakTimer);
  };
}, [isLoggedIn, isBreakPunched]);

关键注意事项 #

• 计时更新必须使用函数式更新：即setXxx(prev => prev + 1)的写法，避免因为闭包捕获旧状态值导致计时不准，也不需要额外把状态加入依赖数组
• 必须给useEffect配置正确的依赖数组：否则会在每次组件渲染时重复创建定时器，引发计时跳变、内存泄漏问题

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