setInterval в React для обновления настроенных часов каждые 1 секунду, искаженные при рендеринге в последней версии Safari.

Question

Итак, я делаю часы с «timelapse» с фиксированным начальным часом.Итак, оно начинается с 8 до 18 часов, затем повторяется.каждые 4 секунды будет проходить 1 час.Любые другие предложения по улучшению моего кода также действительно помогают мне.Заранее спасибо.

constructor(props) {
    super(props);
    this.state = {
        minute: 0,
        second: 0,
        hour: 8,
        leadingZero: 0
    };
}
 componentDidMount() {
    this.timerClock = setInterval(() => {
        if (this.state.minute < 45 && this.state.hour <= 17) {
            this.setState({
                minute: this.state.minute + 15
            })
        }
        else if (this.state.minute >= 45 && this.state.hour <= 17) {

            this.setState({
                minute: 0,
                hour: this.state.hour + 1
            })
        }
        else {
            this.setState({
                minute: 15,
                hour: 8,
            })
        }
    }, 1000);


}


componentWillUnmount() {
    clearInterval(this.timerClock);

}
 render() {
    return (
        <p className="timelapse--clockTime">{this.state.hour < 10 && this.state.leadingZero}{this.state.hour}:{this.state.minute < 10 && this.state.leadingZero}{this.state.minute}
        </p>
    );
}

Так что часы обновляются, как я хочу, но в Safari иногда они представляют новое состояние довольно искаженным.

Answer 1

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

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

И разрешение ухудшается, когда вы опускаетесь до уровня в десятки миллисекунд.

Таким образом, вы действительно не можете полагаться на то, что сумма интервалов будет соответствовать желаемому времени.

Про ваш рендер это странно.Кажется, у вас есть 2 рендера, которые перекрывают друг друга, но в вашем коде я не нахожу доказательств этого.

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