javascript - 在 react 中创建一个计时器

Question

如果这看起来过于简单，请原谅我...这是我在 React 中所做的第一件事，所以我只是想全神贯注。我已经意识到我应该有更小的组件，比如按钮，并用 Prop 渲染它们等等(目标是稍后重构!)但目前我很难弄清楚如何使用 setInterval 方法来改变状态，并且然后停止。

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

我的挣扎是在我的 startStop() 方法中，我想将运行状态(计时器正在运行)更改为 t/f 并且这会起作用，但我显然在用 setInterval 做一些事情。我想设置一个间隔(当有剩余时间时)每秒将状态更改为少 1 秒。当我再次单击该按钮时，间隔计时器将停止，剩余秒数的当前“状态”将相同，因此如果您再次单击该按钮，它只会再次启动计时器。

感谢您的帮助! (这都是从 create-react-app 渲染的，所以我的 github 上还需要更多:https://github.com/ryanmdoyle/web-pomodoro)

    import React, { Component } from "react ";

    class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionTimeEntry: 25, //in min
      breakTimeEntry: 5, //in min
      sessionRemainingSeconds: 1500, //in seconds
      breakRemainingSeconds: 300, //in seconds
      running: false,
      timerLabel: "Session"
    }
    this.addSession = this.addSession.bind(this);
    this.subSession = this.subSession.bind(this);
    this.addBreak = this.addBreak.bind(this);
    this.subBreak = this.subBreak.bind(this);
    this.startStop = this.startStop.bind(this);
    this.resetTimer = this.resetTimer.bind(this);
    this.formatMinutes = this.formatMinutes.bind(this);
  }

  addSession() { //adding and subtracting methods need to also chage the session remaining in seconds to mirrow the entry time if ever changed
    this.setState({
      sessionTimeEntry: this.state.sessionTimeEntry + 1,
      sessionRemainingSeconds: this.state.sessionRemainingSeconds + 60
    })
  }

  subSession() {
    this.setState({
      sessionTimeEntry: this.state.sessionTimeEntry - 1,
      sessionRemainingSeconds: this.state.sessionRemainingSeconds - 60

    })
  }

  addBreak() {
    this.setState({
      breakTimeEntry: this.state.breakTimeEntry + 1,
      breakRemainingSeconds: this.state.breakRemainingSeconds + 60
    })
  }

  subBreak() {
    this.setState({
      breakTimeEntry: this.state.breakTimeEntry - 1,
      breakRemainingSeconds: this.state.breakRemainingSeconds - 60
    })
  }

  startStop() {

    let timer;
    const status = this.state.running;

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

        while (this.state.breakRemainingSeconds > 0) {
          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(timer)
        break;
      default:
        break;
    }

  }

  resetTimer() {
    this.setState({
      sessionTimeEntry: 25,
      breakTimeEntry: 5,
      sessionRemainingSeconds: 1500,
      breakRemainingSeconds: 300,
      running: false,
      timerLabel: "Session"
    })
  }

  formatMinutes(time) {
    let seconds = time;
    const minutes = (seconds % 60 === 0) ? ((seconds / 60) < 10 ? "0" + seconds / 60 : seconds / 60) : (Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60));
    seconds = (seconds % 60 === 0) ? "00" : ((seconds % 60 < 10) ? "0" + (seconds % 60) : seconds % 60)
    console.log(minutes + ":" + seconds);
    return minutes + ":" + seconds;
  }

  render() {
    return ( <
      div >
      <
      h1 > Pomodoro Clock < /h1> <
      h2 > {
        this.state.sessionTimeEntry
      } < /h2> <
      div id = 'timerContainer' >
      <
      h3 id = "session-label" > Session Time < /h3> <
      h3 id = "session-length" > {
        this.formatMinutes(this.state.sessionRemainingSeconds)
      } < /h3> <
      button onClick = {
        this.addSession
      }
      id = "session-increment" > ^ < /button> <
      button onClick = {
        this.subSession
      }
      id = "session-decrement" > v < /button> <
      /div> <
      div id = 'timerContainer' >
      <
      h3 id = "break-label" > Break Time < /h3> <
      h3 id = "break-length" > {
        this.state.breakTimeEntry
      } < /h3> <
      button onClick = {
        this.addBreak
      }
      id = "break-increment" > ^ < /button> <
      button onClick = {
        this.subBreak
      }
      id = "break-decrement" > v < /button> <
      /div> <
      div >
      <
      button onClick = {
        this.startStop
      }
      id = "start-stop" > Start / Stop < /button> <
      button onClick = {
        this.resetTimer
      }
      id = "reset" > Reset < /button> <
      /div> <
      /div>
    )
  }

}

export default App;

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

想通了!这是工作代码笔的链接，可以查看它的运行情况。

https://codepen.io/ryanmdoyle/pen/vaxoaG

Answer 1

我认为问题出在您的 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;
    }

}