RxJs interval闲置计时器点击重置异常问题排查

核心问题：固定间隔定时器未随用户操作重置 #

当前代码用interval(idleTimeout)实现闲置检测，本质是每隔固定时长做一次超时检查，而非真正的“用户操作后重新开始计时”。用户点击仅更新了lastClickTime时间戳，但固定间隔的定时器不会被重置，仍按最初的周期触发检查，导致超时计算逻辑混乱。

拿你给出的10秒超时例子拆解：

• 组件挂载（0秒）时启动interval，会在10秒、20秒、30秒...固定时间点触发检查；
• 3秒时用户点击，lastClickTime更新为3秒；
• 10秒时interval触发检查：计算10-3=7<10，判定未超时，不切换模式；
• 下一次interval在20秒触发：20-3=17>10，此时才触发模式切换——从用户点击到切换间隔了17秒，和预期的“点击后10秒切换”完全不符。

代码中的具体错误点 #

1. 误用interval而非可重置的超时器：interval是固定周期重复执行的定时器，无法实现“操作后重新计时”的核心需求；正确的闲置计时器应该是每次用户操作后，取消当前超时任务，重新启动一个新的idleTimeout时长的超时器。
2. signal$仅记录操作时间未干预定时器：用户操作仅更新时间戳，但不中断原有定时器的运行，导致检查时机完全脱离用户操作节点，最终超时判断逻辑错误。

修正思路参考 #

改用switchMap结合timer实现重置逻辑，每次用户操作或活跃通话时，自动取消当前超时任务并重新计时：

const idleTimerEpic: Epic<AnyAppState, AnyAction, EpicDeps> = (action$, state$) => {
  const idleTimeout = 45000;

  const events = ['mousedown', 'ontouchstart'];
  const signal$ = merge(...events.map(event => fromEvent(document, event))).pipe(
    startWith(null),
    withLatestFrom(state$),
    filter(([, state]) => getCallState(state) === CALL_STATE.none),
    map(() => Date.now())
  );

  const isClientFromInternet = isFromNetworkConnection();
  if (isClientFromInternet) {
    console.log('Sorry but we can not reset mode because you from Internet');
    return EMPTY;
  }

  return action$.pipe(
    ofType(modeUpdateAction.init.type, lifeCircleActions.mount.type),
    mergeMap(() => {
      // 每次用户操作，switchMap会取消之前的timer，重新启动新的超时器
      return signal$.pipe(
        switchMap(() => timer(idleTimeout)),
        takeUntil(action$.pipe(ofType(modeUpdateAction.init.type, lifeCircleActions.mount.type))),
        map(() => modeUpdateAction.reset())
      );
    })
  );
};

内容的提问来源于stack exchange，提问作者Андрей Дев