为什么RxJS的interval重置后再启动不从0开始，而是延续上次值？

问题根因 #

你当前的实现存在两个核心问题：

• RxJS的interval(1000)发射的数值是从订阅时刻开始累计的独立序列，和你本地维护的time状态没有关联。你点击Reset仅修改了time的值，没有重置interval的订阅，后续interval发射的值还是会接着之前的计数走
• 你当前的逻辑只是在timerOn为false时不执行setTime操作，但interval本身还在持续运行、累计计数，重启后自然会沿用之前的累计值

修复方案 #

修改逻辑如下：

1. 调整useEffect逻辑，仅在timerOn为true时创建interval订阅，为false时直接销毁订阅，保证每次启动都是全新的定时器、从0开始计数
2. Reset按钮点击时，不仅要把time重置为0，还要把timerOn设为false，销毁当前正在运行的定时器订阅
3. 补充缺失的暂停逻辑，适配常规定时器使用需求

修复后完整代码 #

import { useState, useEffect } from 'react';
import { interval } from 'rxjs';

export default function CustomTimer() {
  const [time, setTime] = useState(0);
  const [timerOn, setTimerOn] = useState(false);

  useEffect(() => {
    // 定时器未开启时不创建订阅
    if (!timerOn) return;

    const observable$ = interval(1000);
    const subscription = observable$.subscribe(count => {
      // 新订阅的interval会从0开始计数，直接更新time即可
      setTime(count + 1); // 加1是为了匹配用户认知：启动1秒后显示1秒，不需要可直接改为setTime(count)
    });

    // 定时器关闭/组件卸载时销毁订阅，避免内存泄漏
    return () => subscription.unsubscribe();
  }, [timerOn]);

  return (
    <div>
      {!timerOn && (
        <button onClick={() => setTimerOn(true)}>Start</button>
      )}
      {timerOn && (
        <button onClick={() => setTimerOn(false)}>Pause</button>
      )}
      {time > 0 && (
        <button onClick={() => {
          setTime(0);
          setTimerOn(false);
        }}>Reset</button>
      )}
      <p>已计时：{time} 秒</p>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Александр Соколов