Как написать цикличный таймер?

Question

[so_easyy]

Всем привет!
Нужно написать таймер на js. Если на реакте еще примерно понимаю, как написать, там удобные стейты есть, то тут даже не могу себе наметить структуру кода(
Смысл таймера в том, что есть "цикл": сначала 25мин, потом 5 мин, потом снова 25 мин, и после этого 15мин. И таких "итераций цикла" пользователь может добавить сколько угодно. При этом таймеры должны переключаться автоматически.
Вроде и понимаю, что делается как-то через setTimeout, но как не кручу их, все равно работает не корректно.

Сами таймеры у меня написаны, однако дальше зашла в тупик и не понимаю, что с ними делать. Кто-то может дать подсказку, куда мне двигаться дальше? (ниже лежит кусок с таймерами, это уже трижды перепиленный вариант, поэтому и выглядит немного нелепо)

startBtn.addEventListener("click", (ev) => {
    clearInterval(countingTimerWork);
    isPaused = !isPaused;
    if (!isPaused) {
        countingTimerWork = setInterval(updateTimerWork, 500);
    };
});

function countDown() {
    let min = Math.floor(timeWork/60);
    let sec = timeWork % 60; 
    sec = sec < 10 ? `0${sec}` : sec;
    timerWork.innerHTML = `${min}:${sec}`;
    timeWork--;
    console.log(timeWork)
    return
}

function updateTimerWork() {
    countDown(5);
    if (timeWork < 0) {
        clearInterval(countingTimerWork);
        console.log("работа");
        countingShortBreak = setInterval(updateShortBreak, 500);
    };
};


function updateShortBreak() {
    countDown(6);
    if (timeWork < 0) {
        console.log('маленький перерыв')
        clearInterval(countingShortBreak);
        countingLongBreak = setInterval(updateLongBreak, 500);
    };
};


function updateLongBreak() {
    countDown(4);
    if (timeWork < 0) {
        console.log('большой перерыв')
        clearInterval(countingLongBreak);
    };
};

Comments

[WbICHA]

Если на реакте еще примерно понимаю, как написать

Я что-то пропустил? В реакте какие-то свои уникальные таймеры?

Answer 1

[Stalker_RED]

Напишите список ваших задач, или периодов, или как их там. В них храните либо длительность, либо время начала и окончания, как вам удобнее.

Напишите ОДИН setInterval, который сравнивает текущее время со временем старта или конца ваших периодов.

Конструкции типа time-- идут лесом.
Потому что и setInterval и setTimeout не гарантируют время срабатывания. Они работают "не раньше чем", а позже - запросто. Только хардкор: const now = new Date() на каждом тике таймера.

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

Answer 2

[Сергей delphinpro]

const timeouts = [
  25, 5, 25, 10
];

function timer() {
    if (timeouts.length > 0) {
        const period = timeouts.pop();
        console.log('Start: ' + period);
        setTimeout(function(){
            console.log('End: ' + period);
            timer();
        }, period * 1000);
    } else {
        console.log('All done!');
    }
}

timer();