javascript - 在 React 中停止另一个函数的间隔

Question

我是 React 新手，我尝试构建一个计时器组件。现在我有启动功能，但我还想通过 onclick 处理程序停止计时器。问题是 start 函数使用了一个区间，但我不知道如何从另一个函数中停止该区间。

我的 JS 代码

  constructor() {
    super();

    this.state = {
      times: [],
      timer: false,
      currentTimer: 0
    }

    this.startTimer = this.startTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);

  }

  startTimer() {

    const start = Date.now();

    this.setState({ timer: true });

    var timer = setInterval(() => {

      let time = new Date() - start;

      this.setState({ currentTimer: Math.round(time / 1000)});


    }, 1000);

  }

  stopTimer() {

    this.setState({ timer: false });
    console.log('stopped');

    //Clear interval here

  }

我知道 timer 变量是该间隔的标识符，但我怎样才能访问它然后停止它呢？我几乎尝试了所有方法，但似乎没有任何效果，我只是不知道如何解决这个问题。

Answer 1

要停止计时器，您需要计时器 id，因此首要任务是以应可在所有类方法中访问的方式存储 id。第二项工作将使用 clearInterval 清除计时器(此处需要计时器 ID)。

一个选项是，将计时器 id 存储在类实例中。

像这样:

startTimer() {
    const start = Date.now();
    this.setState({ timer: true });
    // storing the id
    this.timerID = setInterval(() => {
        let time = new Date() - start;
        this.setState({ currentTimer: Math.round(time / 1000)});
    }, 1000);
}

stopTimer() {
    this.setState({ timer: false });
    clearInterval(this.timerID);
}

工作代码:

class App extends React.Component {

  constructor(){
     super();
     this.state = {currentTimer: ''}
     this.startTimer = this.startTimer.bind(this);
     this.stopTimer = this.stopTimer.bind(this);
  }
  
  startTimer() {
    const start = Date.now();
    this.timerID = setInterval(() => {
        let time = Math.random() * 10;
        this.setState({ currentTimer: time});
    }, 1000);
  }

  stopTimer() {
     clearInterval(this.timerID);
  }
  
  render(){
     return (
        <div>
          Value: {this.state.currentTimer || '0'}
          <br />
          <button onClick={this.startTimer}>Start timer</button>
          <button onClick={this.stopTimer}>Stop timer</button>
        </div>
     )
  }

}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />