javascript - 嵌套 setInterval 变为负数

Question

我的嵌套setInterval(在breakValueBegins()中)不断倒计时并最终进入负数，尽管这是一个阻止它的条件(我仔细检查了if条件是否在setInterval内部并且循环设置正确。它也不是异步问题，因为否则间隔将永远不会开始)。我不知道为什么。关于如何修复它有什么想法吗？

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state ={
    breakSession:5,
    session:25,
    timer: 1500,
    isPaused:true,
    breakValue:300
}
this.handleSession = this.handleSession.bind(this);
this.handleTimer=this.handleTimer.bind(this);
}



handleSession(event){
const id= event.target.id;
let breakvar= this.state.breakSession;
let sessionvar= this.state.session;
let isPaused=this.state.isPaused;

if(isPaused && id==="break-increment" && breakvar<=59){
this.setState((state) => ({
breakSession: this.state.breakSession +1, breakValue:this.state.breakValue + 60}))}

else if (isPaused && id==="break-decrement" && breakvar>1){
this.setState((state) => ({
breakSession: this.state.breakSession -1, breakValue:this.state.breakValue - 60}))}

else if(isPaused && id==="session-increment" && sessionvar <=59){
this.setState((state) => ({
session: this.state.session +1, timer: this.state.timer + 60}))}

else if (isPaused && id==="session-decrement" && sessionvar>1){
this.setState((state) => ({
session: this.state.session -1, timer:this.state.timer - 60}))}

}

breakValueBegins() {
  clearInterval(this.Interval);
  this.newInterval = setInterval(() => {
      let breakValue = this.state.breakValue;
      if (breakValue > 0) {
        this.setState({
          breakValue: this.state.breakValue - 1,
          isPaused: false
        })
      } else {
        clearInterval(this.newInterval)}
    }, 10)
}

handleTimer(evt) {
  const id = evt.target.id;
  let isPaused = this.state.isPaused;
  clearInterval(this.Interval)
  this.Interval = setInterval(() => {
    let timer = this.state.timer;
    if (timer > 0) {
      this.setState({
        timer: this.state.timer - 1,
        isPaused: false
      })
    }
    if (id === "reset") {
      clearInterval(this.Interval);
      this.setState((state) => ({
        session: 25,
        timer: 1500,
        breakSession: 5,
        isPaused: true
      }))
    }
    if (!isPaused) {
      clearInterval(this.Interval);
      this.setState((state) => ({
        isPaused: true
      }))
    }
    if (timer === 0) {
      this.breakValueBegins()
    }
  }, 10)
}



Clock(stateProp){
    let minutes = Math.floor(this.state.timer / 60);
    let seconds = this.state.timer - minutes * 60;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return minutes + ':' + seconds;
}

render() {
    return(
            <div id="container">
                <Display breakValue={this.state.breakValue} breakSession={this.state.breakSession} displayTime={this.Clock()} session={this.state.session}/>
                <p id="break-label">Break length</p>
                <Button onClick={this.handleSession} id="break-increment"/>
                <Button onClick={this.handleSession} id="break-decrement"/>
                <p id="session-label">Session length</p>
                <Button onClick={this.handleSession} id="session-increment" />
                <Button onClick={this.handleSession} id="session-decrement"/>
                <Button onClick={this.handleTimer} id="start_stop"/>
                <Button onClick={this.handleTimer} id="reset"/>
            </div>
)
}

Answer 1

所以你的问题是，当你声明 breakvalue 时，它永远不会被重新分配，所以如果当你调用 breakValueBegins 时，你的变量将保持与 this.state.breakValue 相同的值导致无限递减。

尝试这样的事情

breakValueBegins() {
  clearInterval(this.Interval);
  this.newInterval = setInterval(() => {
      let breakValue = this.state.breakValue;
      if (breakValue > 0) {
        this.setState({
          breakValue: this.state.breakValue - 1,
          isPaused: false
        })
      } else {
        clearInterval(this.newInterval)
    }
  }, 10)
}