реагировать таймер обратного отсчета в миллисекундах - PullRequest
Новая
       24

реагировать таймер обратного отсчета в миллисекундах

1 голос
/ 21 марта 2019

Мне нужен таймер обратного отсчета, который берет время в секундах и возвращает значение в виде дня, часа, минуты, секунды и миллисекунд (до двух цифр, от нуля до 100 миллисекунд).

Мой код ниже имеет разницу во времени из-за задержки. Кроме того, десять миллисекунд занимают большое количество ЦП для вызова таймера, что может быть причиной этого? 

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)

}

1 Ответ

0 голосов
/ 21 марта 2019

Если бы вы могли предоставить больше информации, я мог бы дать вам лучший комментарий.

Но в своем собственном проекте я создал файл 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 и получить желаемый результат из нее.

Надеюсь, это поможет вам.

...