如何实现25+5时钟计时器到00:00后停留再切换周期？

正在制作FreeCodeCamp的25+5时钟项目，核心需求是倒计时到"00:00"时，在"Session"和"Break"周期间切换。当前实现存在问题：计时器要么无法正常显示"00:00"，要么刚到"00:01"就快速切换周期。

渲染部分代码：

<div id="time-left" style={this.state.timerAmount < 60 ? { color: 'red' } : { color: 'black' }}>
  {this.clockInfo() === "00:00" ? this.changeName() : this.clockInfo()}
</div>

最初的changeName()因切换过快，无法看到"00:00"：

changeName() {
   if (this.state.timerAmount === 0 && this.state.timerName === 'Session') {
        this.playSound();
        setTimeout(() => {this.setState(state => ({
          timerAmount: this.state.breakMinutes * 60,
          timerName: 'Break'
    })); },2000);    
     } 
    else if (this.state.timerAmount === 0 && this.state.timerName === 'Break') {
      this.playSound();
      this.setState(state => ({
         timerAmount: this.state.sessionMinutes * 60,
         timerName: 'Session'
    })); }
  }

后续尝试用DOM操作强行设置"00:00"，但出现短暂空白：

changeName() {
   if (this.state.timerName === 'Session') {
       
        document.getElementById('time-left').innerHTML = "00:00"
        this.playSound();
        setTimeout(() => {this.setState(state => ({
          timerAmount: this.state.breakMinutes * 60,
          timerName: 'Break'
    })); },2000);    
     } 
    else if (this.state.timerName === 'Break') {
      document.getElementById('time-left').innerText = "00:00";
      this.playSound();
      setTimeout(() => {this.setState(state => ({
         timerAmount: this.state.sessionMinutes * 60,
         timerName: 'Session'
    }));} , 2000);
  }

问题根源在于渲染阶段调用状态修改函数，触发重渲染导致周期提前切换。正确做法是将周期切换逻辑整合到倒计时定时器中，而非渲染环节。

1. 重构倒计时核心逻辑 #

在启动倒计时的函数中，处理时间归零后的延迟切换逻辑：

startTimer() {
  this.timerInterval = setInterval(() => {
    this.setState(prevState => {
      if (prevState.timerAmount <= 0) {
        // 停止当前倒计时
        clearInterval(this.timerInterval);
        this.playSound();
        // 延迟2秒后切换周期并重启倒计时
        setTimeout(() => {
          const newTimerName = prevState.timerName === 'Session' ? 'Break' : 'Session';
          const newTimerAmount = newTimerName === 'Session' 
            ? prevState.sessionMinutes * 60 
            : prevState.breakMinutes * 60;
          this.setState({
            timerName: newTimerName,
            timerAmount: newTimerAmount
          }, () => {
            // 状态更新完成后重启倒计时
            this.startTimer();
          });
        }, 2000);
        // 保持时间为0，确保界面稳定显示"00:00"
        return { timerAmount: 0 };
      }
      // 正常递减时间
      return { timerAmount: prevState.timerAmount - 1 };
    });
  }, 1000);
}

2. 简化渲染逻辑 #

渲染部分仅负责展示时间，移除状态修改调用：

<div id="time-left" style={this.state.timerAmount < 60 ? { color: 'red' } : { color: 'black' }}>
  {this.clockInfo()}
</div>

3. 确保时间格式化正确 #

完善clockInfo()方法，保证时间始终以两位数字格式展示：

clockInfo() {
  const minutes = Math.floor(this.state.timerAmount / 60);
  const seconds = this.state.timerAmount % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

关键说明 #

• 时间归零后先清除定时器，避免继续递减，同时保持timerAmount为0，让"00:00"稳定显示。
• 通过setTimeout延迟2秒切换周期，确保用户能看到"00:00"的状态。
• 避免在渲染函数中修改状态，防止重渲染引发的逻辑混乱。

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