停止 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' />

Answer 2

将 timerId 另存为类实例变量，然后可以从其他函数访问该变量并用于清除间隔

constructor() {
    super();
    this.state = {
      times: [],
      timer: false,
      currentTimer: 0
    }
    this.timer = null;
    this.startTimer = this.startTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);
  }
  startTimer() {
    const start = Date.now();
    this.setState({ timer: true });
    this.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
    clearInterval(this.timer)
  }

Answer 3

timer变量是startTimer()方法的局部变量，它存储该间隔的标识符，但在函数范围之外无法访问。

要解决此问题，请在constructor()方法中添加以下内容：

this.timer = null;

然后，在startTimer()方法更改中：

var timer = setInterval(() => {
  let time = new Date() - start;
  this.setState({ currentTimer: Math.round(time / 1000)});

}, 1000);

自：

this.timer = setInterval(() => {
  let time = new Date() - start;
  this.setState({ currentTimer: Math.round(time / 1000)});

}, 1000);

最后，在方法中添加以下内容stopTimer()：

//Clear interval here code here
clearInterval(this.timer);

<</div> div class="one_answers">

不确定这是否是正确的方法，但如果您寻找快速解决方法，只需将其设为全局(外部组件(。它有效，所以...

编辑：在功能组件中，您必须使用 useRef((

链接到反应文档：https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables