pausing jquery countdown timer button

Question

I've looked up many ways to pause and resume a jQuery countdown but for the life of me can't get it to work with what I have here.

Can anyone point me in the right direction on what I need to attach to the pause button to pause/resume?

Also I'd like to have the timer NOT go past 0 when clicking remove 10 seconds or cut time in half, it its more than 0 just stop at 0 and play the sound. It currently goes to a negative number then bounces back to positive numbers and continues to count down, this isn't what I expected it to do :-/

Currently have: jsFiddle

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="timercontainer">
<div id="timerdiv">
</div>
<div class="section">
<input id="ten" type="submit" value="start 10 seconds">
<input id="twenty" type="submit" value="start 20 seconds">
<input id="thirty" type="submit" value="start 30 seconds">
<input id="one-min" type="submit" value="start 1 min">
<input id="five-min" type="submit" value="start 5 min">
</div>
<div class="section">
<input id="add" type="submit" value="add 10 seconds">
<input id="remove" type="submit" value="remove 10 seconds"></div>
<div class="section">
<input id="half" type="submit" value="cut time in half">
<input id="double" type="submit" value="double time"><br />
<input id="pause" type="submit" value="pause">
</div>
</body>

javascript

pingSound = new Audio("https://www.sounddogs.com/previews/2176/mp3/115553_SOUNDDOGS__ca.mp3");
pingSoundNear = new Audio("https://www.sounddogs.com/previews/25/mp3/234977_SOUNDDOGS__cl.mp3");
pingSound.preload = "auto";
pingSoundNear.preload = "auto";
timeout = null;
time = null;

$('#ten').on('click', function(){
        startCountdown(10, 1000, end);
});
$('#twenty').on('click', function(){
        startCountdown(20, 1000, end);
});
$('#thirty').on('click', function(){
        startCountdown(30, 1000, end);
});
$('#one-min').on('click', function(){
        startCountdown(60, 1000, end);
});
$('#five-min').on('click', function(){
        startCountdown(300, 1000, end);
});

$('#pause').on('click', function(){
        time = clearInterval(time);
    });
$('#add').on('click', function(){
    time = time+10;
    startCountdown(time, 1000, end);
});
$('#remove').on('click', function(){
    time = time-10;
    startCountdown(time, 1000, end);
});
$('#half').on('click', function(){
    time = time *.5;
            roundedTime = Math.round(time);
    startCountdown(roundedTime, 1000, end);
});
$('#double').on('click', function(){
    time = time *2;
            roundedTime = Math.round(time);
    startCountdown(roundedTime, 1000, end);
});

$('#pause').click(function () {
    if (clicked) {
        counter = setInterval(function () {
            var m = $('.min', timer),
                s = $('.sec', timer);
            if (seconds === 0) {
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }
            m.text(minutes);
            s.text(leadingZero(seconds));
        }, 1000);
    } else {
        clearInterval(counter);
    }
    clicked = !clicked;
});

function startCountdown(timen, pause, callback) {
    time = timen;
    $('#timerdiv').html(timen);
            if (timen < 10) {
                pingSoundNear.play();
            }
            if (timen > 10) {
                pingSoundNear.pause();
            }
            if (timen <= 0) {
                pingSound.play();
                pingSoundNear.pause();
            }
            else
            {
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            startCountdown(timen-1, pause, callback)
        }, pause);
    }
}
function end() {
 /*      alert(); */
                    pingSound.play();
}

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Theres a solution here i thought was pretty cool. Let the interval continue going on and only update the display when the paused variable is set to false.

You can add an if statement to the top of the function that runs in setInterval that checks to see if the timer is paused, if it isnt then continue normally if it is then dont do anything.

edited May 23 '17 at 12:23

Community

1
1

answered Nov 12 '15 at 15:47

Joshua JLIVE Williams

144
2
11

I got your solution to work for pausing, now I'm just not sure what I need to put to unpause it. I can get it to start at a specific time but I'm not sure how to go from where it left off. https://jsfiddle.net/tfm4th/xhcwt2vo/11/ – Tom Nov 12 '15 at 20:23
when you unpause run the startCountdown function with the following parameters (time,1000,end) by passing through the time variable in the the parameter your timer should pick up with whatever value it was paused at since you update the time variable at the top of your function. **I recommend you set a default value for time to 0** otherwise if they unpause while time is null your function will break – Joshua JLIVE Williams Nov 12 '15 at 20:59
Thanks that was the issue, works like a dream now. Thank you Brian as well, won't let me accept 2 answers even though you both gave me answers regarding separate things. – Tom Nov 12 '15 at 21:24

Brian FitzGerald · Answer 2 · 2015-11-12T15:57:19.557

1

The variable clicked is not defined in your pause button's click handler, which is breaking your js. Aside from that it looks like you're on the right track.

That variable should be changed to something like isCountingDown and defined on the module level (with your other variables at the top), which would then need to be toggled based on whether or not the timer is actively counting down.

If isCountingDown is true, clicking the pause button should clear the interval (pausing the timer), otherwise it should resume the countdown.

As for your second issue, you simply need to add your desired logic into your #remove handler and if the time variable has been set to less than zero you would manually reset it to zero. This can be handled with a simple condition.

Hope that helps. Good luck!

edited Nov 12 '15 at 15:57

answered Nov 12 '15 at 15:51

Brian FitzGerald

3,041
3
28
38

Thanks guys. Okay so I changed the variable to the isCountingDown and added it to be true when the function "startCountdown" begins, but it didn't seem to have any effect. I'm not very fluent in js, and most of this is code merged together from snippets I found. I feel like I need to change a variable somewhere in the pause perhaps? For the second issue, I'd add that logic into the $('#remove').on('click', function(){ correct? UPDATE: https://jsfiddle.net/tfm4th/xhcwt2vo/10/ – Tom Nov 12 '15 at 16:48
Got the second issue working with that condition statement idea, thanks. The first part still struggling with but almost there I think. – Tom Nov 12 '15 at 20:25
The problem is that the timer you are creating in startCountdown is called `timeout` and the timer you are clearing in your pause handler is called `time`. For the sake of simplicity, ensure you are always dealing with the same timer variable name when you start and stop it. – Brian FitzGerald Nov 12 '15 at 21:00

pausing jquery countdown timer button

2 Answers2