Реагируйте на собственный рендеринг с помощью setInterval - PullRequest
Новая
       59

Реагируйте на собственный рендеринг с помощью setInterval

0 голосов
/ 14 июля 2020

Я пытаюсь разработать простую игру с таймером, в которой пользователю нужно останавливать секундомер с точностью до миллисекунды. Я пошел дальше и использовал заданный интервал только для того, чтобы позже понять, что это очень тяжело, вызывает много лагов и не работает должным образом. Что может быть для этого альтернативой? Этот код отлично работает на iPhone xs, но изо всех сил пытается работать на android. Как я могу решить эту проблему? Вот мой код: 

 class TimerGame extends Component {
_isMounted = false;
constructor(props) {
super(props);
this.interval = null;
this.state = {
msec: 0,
lapArray: [0, 0, 0, 0, 0],
turn: 0,
};
}
componentWillUnmount() {
this._isMounted = false;
clearInterval(this.interval);
}
componentDidMount() {
this._isMounted = true;
if (this._isMounted) {
this.interval = setInterval(() => {
if (this.state.msec <= 100) {
this.setState({
msec: this.state.msec + 1,
});
} else {
this.setState({
msec: 0,
});
}
}, 1);
} else {
clearInterval(this.interval);
}
}
handleLap = (msec) => {
let temp = this.state.lapArray;
temp[this.state.turn] = msec;
this.setState({ lapArray: temp, turn: this.state.turn + 1 });
};
render() {
return (
<Screen
style={{
backgroundColor: colors.dark,
alignItems: "center",
justifyContent: "space-between",
flex: 1,
}}
>
<TimerGoal />
<View style={{ alignItems: "center" }}>
<StepCircleList
   turn={this.state.turn}
   msec={this.state.msec}
   data={this.state.lapArray}
   />
<ProgressCircle
   percent={this.state.msec}
   radius={120}
   borderWidth={40}
   color={colors.white}
   shadowColor="#999"
   bgColor={colors.dark}
   >
   <Text style={{ fontSize: 35, color: colors.white }}>
   {this.state.msec}
   </Text>
</ProgressCircle>
</View>
<StopButton onPressBtn={() =>
this.handleLap(this.state.msec)} />
</Screen>
);
}
}
...