React开发freeCodeCamp 25+5时钟 测试10、11报错暂停后计时仍流逝

报错对应的是定时器竞态问题，本地手动操作因为反应速度限制很难复现，但自动化测试的毫秒级操作会直接暴露问题：

• 原有计时逻辑将counterScreenSession作为useEffect的依赖项，导致每一次计时数值递减时，都会执行「清除旧定时器→新建1秒定时器」的全流程。
• 当测试快速切换播放、暂停状态时，刚新建的定时器回调可能已经进入JS事件队列，还没被暂停逻辑清除，就已经触发了一次数值递减，出现「暂停后计时仍跳1秒」的偏差，最终导致测试比对值不匹配（预期暂停时值为59，实际已变为58）。

1. 重构计时器逻辑的依赖项 #

将控制计时器的副作用逻辑改为只依赖播放状态，利用React状态更新的函数式特性，移除不必要的依赖，避免定时器频繁重建：

// 仅监听播放状态，状态变化时再创建/清除定时器
useEffect(() => {
  let timer = null
  if (play) {
    timer = window.setInterval(() => {
      // 函数式更新不需要依赖当前的counter值
      setCounterScreenSession(prevCount => prevCount - 1)
    }, 1000)
  }
  // 状态切换时清理残留定时器，从根源消除竞态
  return () => clearInterval(timer)
}, [play])

2. 修正时长配置的同步逻辑 #

原有监听时长变化的副作用错误将breakCounter作为依赖，导致调整休息时长时，也会强制重置当前屏幕的计时值，不符合测试规则：

// 仅在计时器未运行时，同步对应配置的时长到屏幕
useEffect(() => {
  if (!play) {
    setCounterScreenSession(prevCount => {
      // 根据当前激活的阶段，匹配对应配置的时长
      return session ? sessionCounter : breakCounter
    })
  }
}, [sessionCounter, breakCounter, play, session])

3. 优化阶段切换的触发逻辑 #

原有计时归零时的切换逻辑没有做边界判断，会在多次渲染周期内重复触发音效播放、阶段切换的动作，需要补充判断确保仅在计时归零时触发一次：

useEffect(() => {
  if (counterScreenSession === 0) {
    const audio = document.getElementById('beep')
    audio.play()
    // 切换激活的阶段，同步对应阶段的时长
    setSession(prevSession => {
      const nextSession = !prevSession
      setCounterScreenSession(nextSession ? sessionCounter : breakCounter)
      return nextSession
    })
  }
}, [counterScreenSession, sessionCounter, breakCounter])

4. 调整音频元素位置 #

将<audio id="beep">从组件嵌套结构中移出，放在全局可访问的位置，确保测试可以正常获取到音频元素的引用。

补充细节：CircularProgressbar组件的counterClockwise属性需要传入布尔值true，而非字符串"true"，否则会出现动画方向不符合预期的问题，虽然不影响当前测试，但会影响交互体验。

人手动操作的反应间隔通常在200ms以上，远大于定时器的1秒触发间隔，完全落在竞态窗口之外；但freeCodeCamp的自动化测试在触发播放后，会在50ms以内触发暂停动作，刚好命中定时器重建的间隙，触发残留逻辑的数值递减，最终出现测试比对值偏差。

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