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

Question

Я работаю над веб-приложением, которое помогает рассчитывать время и планировать занятия йогой. В программе установлен таймер, который можно приостановить, и каждая поза в программе имеет свою продолжительность. Когда продолжительность одной позы истекает, приложение переключает фокус на следующую позу в программе. Мне также нужна индикация того, когда поза подходит к концу, чтобы я мог указать это пользователю.

Мне сложно заставить таймер работать с другими движущимися частями. Я начинаю задаваться вопросом, возможно, использование чего-то вроде setInterval - неправильный подход. Я поискал библиотеки, которые могли бы облегчить мне жизнь, но не нашел ничего полезного.

Есть ли у кого-нибудь совет? Я бился головой об этом уже несколько дней, был бы очень признателен за любой ввод!

Вот соответствующий код:

// Cycle through all poses on timer.
    const $poses = $(".pose-card");
    let poseIndex = 0;

const nextPose = () => {
    // If not paused and poses remaining, play next pose.
    if (!isPaused && poseIndex < $poses.length) {
        $poses.removeClass("active-pose");
        currentPose = $poses.eq(poseIndex);
        currentPoseDuration = currentPose.data().duration * 1000;

        currentPose.addClass("active-pose");
        poseStartTime = new Date();
        poseTimeoutId = setTimeout(() => {
            poseIndex++;
            nextPose();
        }, poseTimeRemaining || currentPoseDuration);
    }
};

// Start routine and timer on click, or pause if already started.
$("#play-btn").click(() => {
    $("button").removeClass("active-button");
    $("#play-btn").addClass("active-button");

    poseStartTime = new Date();
    isPaused = false;

    setTimeout(nextPose, 1000);
    setTimer(totalTimeLeft || totalDuration);
});

$("#pause-btn").click(() => {
    $("button").removeClass("active-button");
    $("#pause-btn").addClass("active-button");

    isPaused = true;

    timeOfPause = new Date();

    clearTimeout(poseTimeoutId);
    clearInterval(yogaTimer);

    poseTimeRemaining = currentPoseDuration - (timeOfPause - poseStartTime);
});

// ====================  GLOBAL TIMER ==================== //

const setTimer = (duration) => {
    let timer = duration,
        minutes,
        seconds;
    if (!isPaused) {
        yogaTimer = setInterval(() => {
            minutes = parseInt(timer / 60);
            seconds = parseInt(timer % 60);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $("#timer").text(`${minutes}:${seconds}`);

            totalTimeLeft = duration--;
            currentPoseDuration -= 1000;

            // When timer reaches 0, clear interval.
            if (--timer < 0) {
                clearInterval(yogaTimer);
            }
        }, 1000);
    } else {
        clearInterval(yogaTimer);
        isPaused = true;
    }
};

});