реактивный род setTimout && setInterval - PullRequest
Новая
       17

реактивный род setTimout && setInterval

0 голосов
/ 24 августа 2018

У меня были проблемы с точным срабатыванием определенных событий и функций при развертывании в магазине приложений для бета-тестирования моего приложения. Мое приложение представляет собой простой генератор точек, с одной точкой, генерирующей каждую минуту, однако точки не начинают генерироваться в течение трех минут после запуска таймера. Я использую setInterval и setTimeout и думаю, что они могут не очень хорошо играть друг с другом. 

export default class GeoAndMoments extends React.Component {
 constructor(props) {
  super(props)
   this.didMount = false
   this.state = {
    storedPoints: 0 //pulled from an external database
  }
  componentDidMount() {
   this.setState({isLoaded: true})
   this.didMount = true
  }
  componentWillUnmount() {
   clearInterval(this.intervalId)
   this.didMount = false
  }
  timer() {
   this.setState({
    counter: moment().diff(this.state.startingMoment, 'minutes'),
    storedAndCounter: moment().diff(this.state.startingMoment, 'minutes') + this.state.storedPoints,
   })
  }
 render() {
  if(!this.state.isShown){
   setTimeout(() => {
    this.watchId = navigator.geolocation.watchPosition(
      (position) => {
        if(position.coords.speed >= 10) {
          this.setState({
            speed: position.coords.speed,
            isShown: true,
            startingMoment: moment(),
            counter: moment().diff(this.state.startingMoment, 'minutes')
          })
          this.setState({
            storedAndCounter: moment().diff(this.state.startingMoment, 'minutes') + this.state.storedPoints,
          })
        }
      },
      { enableHighAccuracy: true, timeout: 21000, maximumAge: 1000, distanceFilter: 10 },
    )
  }, 10000)
  this.intervalId = setInterval(this.timer.bind(this), 60000)
  clearTimeout()
}
return (
  <Container>
    <Container>
    {this.state.isShown && <Container>
      <Content>
        {this.state.isLoaded ? <Text>Welcome {this.state.email}</Text> : null}
        <Text
        >Points Earned This Trip</Text>
        <ImageBackground
        source={require('../public/odometer.jpg')}
        >
          <Text
          >{this.state.counter}</Text>
        </ImageBackground>
        <Text
        >Total Points Earned</Text>
        <ImageBackground
        source={require('../public/odometer.jpg')}
        >
        {this.state.isLoaded ? <Text>{this.state.storedAndCounter}</Text> : <Text>Loading...</Text>}
        </ImageBackground>
      </Content>
    </Container>}
    <Logo />
    </Container>
    <Feedback />
  </Container>
   )
  }
 }

Цель setTimeout - убедиться, что пользователь перемещается со скоростью более 10 миль в час, и создать setInterval.

...