如何在番茄钟计时器中重置滴答功能

Question

我正在ReactJS中开发番茄钟风格的计时器。我已经为工作计时器和休息计时器编写了代码，但是一旦休息计时器达到 0，它就会再次自动启动工作计时器。如何重置进程并让用户再次单击"开始"以使工作计时器运行。下面是我拥有的tick()函数的代码，但是一旦休息计时器完成，它仍然在休息后重新开始。不知道我做错了什么，任何帮助表示感谢！

  tick() {
    const timerType = this.state.workTimer ? "work" : "break";
    if(this.state[timerType+"Time"]*60 - Math.round(this.state.elapsed / 1000) <= 0) {
      clearInterval(this.ticker);
      this.setState({
        workTimer: !this.state.workTimer,
        startTime: new Date()
      });
      this.ticker = setInterval(this.tick, 1000);
    }
    this.setState({
      elapsed: new Date() - this.state.startTime
    });
    if(this.state[timerType+"break"]*60 - Math.round(this.state.elapsed / 1000) <= 0) {
      clearInterval(this.ticker);
      this.setState({
        elapsed: null
      });
    }
  }

Answer 1

看起来像休息后的第一个 if 条件启动计时器。您可以先添加工作计时器签入，例如

if(this.state[timerType+"Time"]*60 - Math.round(this.state.elapsed / 1000) <= 0 && this.state.workTimer) {}