IT技术 - React 中的 clearInterval - 吾爱随笔录

React 中的 clearInterval

IT技术 reactjs setinterval clearinterval

2021-05-02 02:35:42

我是 React 的新手，我试图创建一个带有开始和停止按钮的简单秒表。我正在用头撞墙，试图用停止按钮上的 onClick 事件清除间隔。我会为 setInterval 声明一个变量，然后使用 clearInterval 清除它。不幸的是，它不起作用。有小费吗？先感谢您。

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {time:0}

    this.startHandler = this.startHandler.bind(this);
  }

  getSeconds(time){
    return `0${time%60}`.slice(-2);
  }

  getMinutes(time){
    return Math.floor(time/60);
  }

  startHandler() {
      setInterval(()=>{
      this.setState({time:this.state.time + 1});
    },1000)

  }

  stopHandler() {
    //HOW TO CLEAR INTERVAL HERE????
  }

  render () {
    return (
      <div>
        <h1>{this.getMinutes(this.state.time)}:{this.getSeconds(this.state.time)}</h1>
        <button onClick = {this.startHandler}>START</button>
        <button onClick = {this.stopHandler}>STOP</button>
        <button>RESET</button>
      </div>
    );
  }
}

export default App;

4个回答

您可以为组件的状态添加间隔，并可以随时清除它。

componentDidMount(){
  let intervalId = setInterval(this.yourFunction, 1000)
  this.setState({ intervalId: intervalId })
}

componentWillUnmount(){
  clearInterval(this.state.intervalId)
}

在您的 startHandler 函数中，您可以执行以下操作：

    this.myInterval = setInterval(()=>{
      this.setState({ time: this.state.time + 1 });
    }, 1000);

在你的stopInterval()你会做clearInterval(this.myInterval);

您可以使用clearInterval(id)来阻止它。您必须存储setInterval例如的 ID

const id = setInterval(() = > {
    this.setState({
        time: this.state.time + 1
    });
}, 1000)
clearInterval(id);

您可以setTimeout在useEffect没有依赖关系的情况下使用inside ，因此它在组件启动时调用一次，然后clearInterval在组件卸载时调用。

useEffect(() => {
    let intervalId = setInterval(executingFunction,1000)
    return(() => {
        clearInterval(intervalId)
    })
},[])

其它你可能感兴趣的问题