Я создал очень простой аудиоплеер, и я использую setInterval, чтобы создать эффект продвижения индикатора выполнения.Код компонента выглядит следующим образом:
class AudioPlayer extends Component {
constructor(props) {
super(props)
this.audio = new Audio(file);
}
state = {
playButton: 'play',
progress: 0,
}
componentDidMount = () => {
this.currentTimeInterval = null;
this.slider = 0;
this.audio.onplay = () => {
this.currentTimeInterval = setInterval( () => {
this.slider = (this.audio.currentTime * 100) / this.audio.duration;
this.setState({progress: this.slider})
}, 100);
};
}
playAudio = () => {
if (this.state.playButton === 'play') {
this.audio.play();
this.setState({playButton: 'pause'});
} else {
clearInterval(this.currentTimeInterval);
this.audio.pause();
this.setState({playButton: 'play'});
}
}
render() {
return(
<div>
<button onClick={this.playAudio}><FontAwesomeIcon icon="step-backward" /></button>
<button onClick={this.playAudio}><FontAwesomeIcon icon={this.state.playButton} /></button>
<button onClick={this.stopAudio}><FontAwesomeIcon icon="stop" /></button>
<button onClick={this.playAudio}><FontAwesomeIcon icon="step-forward" /></button>
<div className="progress-bar" style={{width: this.state.progress + '%'}}></div>
</div>
)
}
}
Это выглядит вполне нормально, когда интервал установлен на 100, но если я изменю его на 500, то полоса не будет двигаться плавно.Я попытался применить следующий код CSS:
.progress-bar {
background-color: blue;
-webkit-transition: width 0.3s ease;
-o-transition: width 0.3 ease;
transition: width 0.3 ease;
height: 20px;
}
Но когда интервал установлен на 500, переход CSS не поможет, если я не установлю время по крайней мере 5 с, что не хорошо, потому что этосоздает задержку.
Таким образом, мой вопрос касается производительности - рекомендуется ли использовать интервал 100 или даже меньше?Не влияет ли это на производительность, которую я вызываю повторным рендерингом компонента каждые 100 мс?Мне просто интересно, хорошая ли это практика?
Заранее спасибо