Question

问题：当我停止计时器后点击我的开始按钮时，我似乎无法恢复计时器。

期望的结果：对于任何给定的计时器，当我点击开始按钮后，点击停止按钮后，我希望时间从中断处继续。

我认为单击开始按钮时，它会在被清除后再次调用setInterval函数，但是，我遇到了解决这个问题的问题。

我在每个函数中都有与eventID var相同的范围内的stop事件，它包含setInterval函数本身。这就是停止按钮工作的原因。调用定时器函数（setPomodoro，setLongBreak，setShortBreak）会将其计时器重置为原始状态。我似乎无法掌握如何从计时器停止的时间开始恢复。

JSBIN： http://jsbin.com/bucalequsi/edit?html,js,output

重新创作：

//  Problem: Pomodor timer does not have functionality
//  Solution: Add functionality to the pomodor timer.
//      IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
//      Reset current interval time on reset button.
//      If break buttons are clicked more than once, reset the time.
window.onload = function() {

    var pomodoro = document.querySelector('#set-time'),
        longBreak = document.querySelector('#long-brk'),
        shortBreak = document.querySelector('#short-brk'),
        stopButton = document.querySelector('#stop'),
        startButton = document.querySelector('#start'),
        resetButton = document.querySelector('#reset'),
        container = document.querySelector('#container'),
        actionButtons = document.querySelector('#buttons'),
        timer = document.querySelector('#timer');

   //  Click event for break timers.    
    container.addEventListener('click', function(e) {
//      store event target
        var el = e.target;
            if (el === pomodoro) {
                setPomodoro();
            } else if (el === longBreak) {
                setLongBreak();
            } else if (el === shortBreak) {
                setShortBreak();
            }
            e.stopPropagation();
    }, false);  


//  1.1a Create a timer that counts down from 25 minutes.
    function setPomodoro() {
        var mins = 24;
        var secs = 60;
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

//  1.2a Create a timer that counts down from 10 minutes
    function setLongBreak() {
        var mins2 = 9;
        var secs2 = 60;
        var intervalID2 = setInterval(function() {
                timer.innerHTML = mins2 + ':' + secs2;
                secs2--;
                if (secs2 === 0) {
                    mins2--;
                    secs2 = 60;
                }
            }, 1000);
         stopButton.addEventListener('click', function(){
            clearInterval(intervalID2);
        }, false);
    }
//  1.3a Create a timer that counts down from 5 minutes.
    function setShortBreak() {
        var mins3 = 4;
        var secs3 = 60;
        var intervalID3 = setInterval(function() {
                timer.innerHTML = mins3 + ':' + secs3;
                secs3--;
                if (secs3 === 0) {
                    mins3--;
                    secs3 = 60;
                }
            }, 1000);
        stopButton.addEventListener('click', function() {
            clearInterval(intervalID3);
        }, false);
    }
};

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Pomodoro Timer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <div id="container">
        <header>
            <div id="header"><h1>Pomodoro Timer</h1></div>
        </header>
        <div class="row">
            <ul id="breaks">
                <li><input type="submit" value="Pomodoro" id="set-time"></li>
                <li><input type="submit" value="Long Break" id="long-brk"></li>
                <li><input type="submit" value="Short Break" id="short-brk"></li>
            </ul>
        </div>
        <h1 id=timer></h1>
        <div class="row">
            <ul id="buttons">
                <li><input type="submit" value="Start" id="start"></li>
                <li><input type="submit" value="Stop" id="stop"></li>
                <li><input type="submit" value="Reset" id="reset"></li>
            </ul>
        </div>
        <footer>
            <p>&copy; Laere 2016</p>
        </footer>
    </div>
    <script src="script.js"></script>
    </body>
</html>

Answer 1

使用按钮启动set...功能时，始终将时间初始化为起始值。相反，如果计时器已在运行，则必须将暂停的时间字符串解析为分钟和秒，并使用这些值来设置变量mins和secs。也许这样的事情会起作用吗？

   function setPomodoro() {
        if(timer.innerHTML.length > 0){
            var t = timer.innerHTML.split(':');
            var mins = parseInt(t[0]);
            var secs = parseInt(t[1]);
        }
        else{
            var mins = 24;
            var secs = 60;
        }
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

停止后重新启动计时器

1 个答案: