Javascript 在react中创建计时器

请原谅我，如果这看起来太简单了…这是我在React中做的第一件事，所以我只是试着把我的头绕在事情上。我已经意识到我应该有更小的组件，比如按钮，并用道具渲染它们，所有的目标是以后重构！但目前我很难弄清楚如何使用setInterval方法来更改状态，然后停止

我正在构建一个pomodoro计时器，其总体思想是，我的状态是保持计时器应该剩余的总秒数。我有另一个函数，它将总秒数转换为我想要显示的时间格式

我的斗争是在我的startStop方法中，我希望将运行计时器的状态更改为t/f，这将起作用，但我显然正在使用设置间隔进行一些工作。我想设置一个间隔，当有剩余的时间改变状态时，每秒钟减少1秒。当我再次单击按钮时，间隔计时器将停止，剩余秒数的当前状态将相同，因此如果再次单击按钮，它将再次启动计时器

谢谢你的帮助！这些都是从create react应用程序渲染的，因此我的github需要更多：

****************更新*****************

都想出来了！这里有一个指向工作代码笔的链接，可以查看它的运行情况

您可以创建一个setInterval，它将breakRemainingSeconds减少为每秒一个，并将setInterval返回的id存储在实例上。当您想停止计时器时，可以稍后使用clearIntervalthis.timer

startStop() {
  const { running } = this.state;

  if (running) {
    this.setState({
      running: false
    });
    clearInterval(this.timer);
  } else {
    this.setState({
      running: true
    });

    this.timer = setInterval(() => {
      this.setState(previousState => {
        return {
          breakRemainingSeconds: previousState.breakRemainingSeconds - 1
        };
      });
    }, 1000);
  }
}

---

我认为问题在于你的startStop功能。请从函数中删除while循环

startStop() {
    const status = this.state.running;

    switch (status) {
        case false:
          console.log("should start!")
          this.setState({
              running: true
          })

          this.timer = setInterval(() => {
              this.setState({
                  breakRemainingSeconds: this.state.breakRemainingSeconds - 1
              });
              console.log(this.state.breakRemainingSeconds);
          }, 1000)
        }

        break;
        case true:
          console.log("should stop")
          this.setState({
            running: false
          }) 
          clearInterval(this.timer)
          break;
        default:
          break;
    }

}

---

我建议使用图书馆式的时刻。只需将其作为依赖项安装即可：npm我会立即做出反应，因为JS在日期和时间方面可能会有点棘手。无论如何，这里有一个函数可以让你开始。我希望有帮助。我使用breakRemainingSeconds进行演示，但您可以调整它以实现组件中可能需要的所有“时间”管理

类计时器扩展了React.Component{ 建造师{ 超级的 this.state={ 时间：{}， 休息时间：300秒 }; 这个计时器=0； this.startTimer=this.startTimer.bindthis； this.countDown=this.countDown.bindthis； } //让我们了解一下JS日期和时间，有时候会有点棘手。 //所以，我们在这里做的是获取这些值，并在小时、分、秒之间进行转换。 //在下面的示例中，我们使用的是分和秒，但为了以防万一，我们在其中也有小时： createTimesecs{ 设小时数=Math.floorsecs/60*60； 让除数为分钟=秒%60*60； 让分钟数=Math.floordivisor_为_分钟/60； 让除数为秒=除数为分钟%60； 让秒数=Math.ceildivisor_为_秒； 让时间对象={ h:小时， m：分钟， s:秒 }; 返回时间对象； } 组件安装{

---

//从起点开始->breakRemainingSeconds谢谢！我能够在没有while循环的情况下找到答案。这是问题的一部分。谢谢！看到另一种方法是很有帮助的。我真的试图在没有任何额外的时间/日期依赖的情况下找到答案，但我想在现实生活中我可能会使用它。更多直截了当。

startStop() {
    const status = this.state.running;

    switch (status) {
        case false:
          console.log("should start!")
          this.setState({
              running: true
          })

          this.timer = setInterval(() => {
              this.setState({
                  breakRemainingSeconds: this.state.breakRemainingSeconds - 1
              });
              console.log(this.state.breakRemainingSeconds);
          }, 1000)
        }

        break;
        case true:
          console.log("should stop")
          this.setState({
            running: false
          }) 
          clearInterval(this.timer)
          break;
        default:
          break;
    }

}