如何恢复倒数计时器？

Question

我正在开发一个番茄钟时钟项目，用户可以在其中设置会话长度和休息时间长度，以便时钟倒计时直到用户点击停止。

我希望定时器在我单击“开始”后暂停后恢复，但它会一直切换到其他会话/中断。

我知道我需要计算它停止时的剩余秒数，然后再次运行startTimer()。但我还没有弄明白。

任何帮助表示赞赏！您可以向下滚动到// ==== VIEW ==== //：startTimer(seconds)以查看逻辑。

这是我的代码：

//======MODEL======//
//by default, session lasts 25min, break lasts 5 min
var data = {
    session: 25,
    break: 5,
    isSession: true
}


//===== OCTOPUS=====//

var octopus = {
    init: function() {
        //initialize the views
        settings.init();
        timer.init();
    },
    //========== SETTINGS==========//
    //get the time of session and break
    getCurrentSession: function() {
        return data.session;
    },
    getCurrentBreak: function() {
        return data.break;
    },
    // set the currently-selected time to the object passed in
    setCurrentSession: function(isSession) {
        data.isSession = isSession;
    },

    //increment or decrement the counter
    incrementSessionCounter: function() {
        data.session++;
        settings.render();
    },
    incrementBreakCounter: function() {
        data.break++;
        settings.render();
    },
    decrementSessionCounter: function() {
        data.session--;
        settings.render();
    },
    decrementBreakCounter: function() {
        data.break--;
        settings.render();
    }
}
//----- VIEW----//
var settings = {
    init: function() {
        //display the default session and break with increment and decrement
        //listen to click function on either + or - to adjust the timer
        this.session = document.getElementById("displaySession");
        this.break = document.getElementById("displayBreak");
        this.incrementSession = document.getElementById("increaseSession");
        this.decrementSession = document.getElementById("decreaseSession");
        this.incrementBreak = document.getElementById("increaseBreak");
        this.decrementBreak = document.getElementById("decreaseBreak");

        this.incrementSession.addEventListener("click", function() {
            octopus.incrementSessionCounter();
        });
        this.decrementSession.addEventListener("click", function() {
            octopus.decrementSessionCounter();
        });
        this.incrementBreak.addEventListener("click", function() {
            octopus.incrementBreakCounter();
        });
        this.decrementBreak.addEventListener("click", function() {
            octopus.decrementBreakCounter();
        });
        this.render();
    },
    render: function() {
        // update the DOM elements with values from the current session and break
        var currentSession = octopus.getCurrentSession();
        var currentBreak = octopus.getCurrentBreak();
        this.session.textContent = currentSession;
        this.break.textContent = currentBreak;
    }
}

var timer = {
    init: function() {
        this.startTimer = document.getElementById("start");
        this.stopTimer = document.getElementById("stop");
        this.nextTimer = document.getElementById("next");
        this.render();
    },

    render: function() {
        var displayTimer = document.getElementById("countdown-timer");
        this.startTimer.addEventListener("click", function() {
            getDeadline();
        });
        this.nextTimer.addEventListener("click", function() {
            getDeadline();
        });

        this.stopTimer.addEventListener("click", function() {
            clearInterval(interval);
            delete interval;
        })

        let interval;
        //this function takes in the number of seconds and calculate the seconds left to reach the deadline
        function startTimer(seconds) {

            const now = Date.now();
            const then = now + seconds * 1000;
            interval = setInterval(function() {

                const secondsLeft = (then - Date.now()) / 1000;
                if (secondsLeft < 0) {
                    clearInterval(interval);
                    getDeadline();
                    return;
                }


                displayTimeLeft(secondsLeft);

            }, 1000)

        }
        //this function takes in the number of leftover secs, convert it into mm:ss and display it on screen
        function displayTimeLeft(seconds) {
            var minutes = Math.floor(seconds / 60);
            var remainderSeconds = Math.round(seconds % 60);
            if (remainderSeconds < 10) {
                var display = `${minutes}: 0${remainderSeconds}`;
            } else
                var display = `${minutes}: ${remainderSeconds}`;

            displayTimer.textContent = display;

        }
        //this function gets the input from data, depending on session or break

        function getDeadline() {

            clearInterval(interval);
            var time_input;
            if (data.isSession) {
                time_input = octopus.getCurrentSession();

            } else {
                time_input = octopus.getCurrentBreak();

            }
            data.isSession = !data.isSession;


            startTimer(time_input * 60);

        }
    }
}

octopus.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- View 1: the settings contain session length and break length-->
<section>
  <div id="session">
    <button type="button" id="increaseSession">+</button>
    <span id="displaySession">25</span>
    <button type="button" id="decreaseSession">-</button>
  </div>
  <div id="break">
    <button type="button" id="increaseBreak">+</button>
    <span id="displayBreak">5</span>
    <button type="button" id="decreaseBreak">-</button>
  </div>
  <div><button id="start">START</button>
    <button id="next">NEXT</button>
    <button id="stop">STOP</button></div>
</section>
<!--View 2: the timer itself-->
<div id="countdown-timer"></div>