Question

我需要一个倒数倒数计时器，该计时器以秒为单位，并以日，时，分，秒和毫秒的形式返回（最多两位数，从0到100毫秒）。

由于延迟，我下面的代码存在时差。另外，十毫秒会占用大量CPU来调用计时器，这可能是什么原因造成的？

componentDidMount(){

// get the timer in second then timer * 100 

this.interval = setInterval(() => {
  if (this.state.timer > 0){
    this.setState((prevState)=>({
      timer: prevState.timer -= 1,
      h: Math.floor(this.state.timer / 360000),
      m: Math.floor((this.state.timer % 360000) / 6000),
      s: Math.floor(((this.state.timer % 360000) % 6000) / 100) ,
      mili:Math.floor(((this.state.timer % 360000) % 6000) % 100)
     }));

  }else{

    clearInterval(this.interval)
  }

},10);



}

  componentWillUnmount(){

    clearInterval(this.interval)

}

Answer 1

如果您可以提供更多信息，我可以给您更好的评论。

但是在我自己的项目中，我制作了一个TimerCountdown.js文件，并在其中编写了以下代码：

import React, { Component } from 'react';
import { View } from 'react-native';
import { RText } from '../../shared';

class TimerCountdown extends Component {
constructor(props) {
    super(props);
    this.state ={
        timer: props.initialTime
    }
  }

  componentDidMount(){
    this.interval = setInterval(
      () => this.setState((prevState)=> ({ timer: prevState.timer - 1 })),
      1000
    );
  }

  componentDidUpdate(){
    if(this.state.timer === 1){ 
      console.log("-------------------timer count down is leaking")
      clearInterval(this.interval);
      this.props.onTimerElapsed()
    }
  }

  componentWillUnmount(){
   clearInterval(this.interval);
   this.props.onTimerElapsed()
  }

  render() {
    return (
        <Text style={this.props.style}> {this.state.timer} </Text>
    )
  }
}

export default TimerCountdown;

它工作正常并且完全没有泄漏（窍门只是将这个组件变成一个单独的文件，因此在更新时，它不会影响项目的其余部分）。

我在项目的其他js文件中使用了此组件，如下所示：

<TimerCountdown initialTime={60}/>

您可以在this.state.timer上应用所需的配置，并从中获得所需的结果。

希望它能对您有所帮助。

以毫秒为单位反应本地倒数计时器

1 个答案: