Таймер неправильно переключается между типом «сессия» и «перерыв» - PullRequest
Новая
       12

Таймер неправильно переключается между типом «сессия» и «перерыв»

0 голосов
/ 11 марта 2020

Я делаю pomodoro часы в реаги-редукте, где таймер должен измениться с типа "сеанса" на тип "прерывания", когда таймер достигает нуля. Для этого примера я установил сеанс продолжительностью 1 мин и время перерыва 2 мин. Прямо сейчас, когда мой таймер ведет обратный отсчет до нуля, он переключается на время перерыва 2 минуты, но затем сразу переключается обратно на сессию и отсчитывает от 1 минуты отсюда.

Вот код: 

runTimer = () => {
        // clear any existing timers
        clearInterval(countdown);

        let secondsLeft = parseInt(this.props.timeStr.split(":")[0])*60+parseInt(this.props.timeStr.split(":")[1]);

        countdown = setInterval(() => {
            secondsLeft = secondsLeft - 1;
            // check if we should stop it!
            if(secondsLeft < 0) {
                clearInterval(countdown);
                return;
            }
            this.props.update_counter(displayTimeLeft(secondsLeft)); 
            console.log(this.props.timeStr)
        }, 1000);
        console.log("finished timer")
}
handleChange = () => {
        if(this.props.timeStr==='00:00'){
            const audio = document.getElementById('beep');
            audio.play();

            setTimeout(()=>{ //need to delay 1 second to pass test
                if(this.props.type==='Session'){ 
                    console.log("changed to break")
                    this.props.set_type('Break');
                    this.props.set_time(this.props.breakTime);
                }else{
                    console.log("changed to session")
                    this.props.set_type('Session')
                    this.props.set_time(this.props.sessionTime);
                }
                console.log("start timer upon changing type")
                this.runTimer();
            }, 1000)
        }
}
componentDidUpdate() {
        this.handleChange();
}

Это вывод, который я вижу из консоли на основе моих вставленных операторов console.log: 

        00:02
        00:01
        00:00
        changed to break
        start timer upon changing type
        finished timer
        changed to session
        start timer upon changing type
        finished timer
        00:59
        00:58
        00:57

Я ожидал, что будет обратный отсчет, прежде чем "переключиться на сеанс". Я понимаю, что setInterval - asyn c, поэтому «законченный таймер» немного вышел из строя, но не уверен, почему таймер не запустился после смены режима. Я увидел, что дисплей изменился на 2:00, поэтому я знаю, что "this.props.timeStr" обновлен.

...