react 中使用定时器 Timers(定时器)

• setTimeout,clearTmeout
• setInterval,clearInterval

在 class 中

class TimersDemo extends Component {
  constructor(props) {
      super(props);  
      this.state={
        content:'',
      }
  }
  componentDidMount() {
    this.timer = setTimeout(
      () => {
        this.setState({content:'我是定时器打印的内容...One'})
      },
      500
    );
    this.timer_two = setTimeout(
      () => {
        this.setState({msg:'我是定时器打印的内容...Two'})
      },
      1000
    );
  }
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
    this.timer_two && clearTimeout(this.timer_two);
  }
  render() {
    return (
      <View style={{margin:20}}>
        <Text style={styles.welcome}>
           定时器实例
        </Text>
        <Text>{this.state.content}</Text>
        <Text>{this.state.msg}</Text>
      </View>
    );
  }
}

setTimeout  延时的定时执行

<CustomButton text='测试setInterval'
   onPress={()=>{
      this.interval=setInterval(() => {this.setState({sum:(this.state.sum+1)});
   },400);
   }}
/>
<CustomButton text='clearInterval'
    onPress={()=>{
      this.interval && clearInterval(this.interval);
    }}
/>

 

setInterval   定时间隔执行