CODEWITHSUNDEEP
javascriptjquerytimercountdown
Tom
Tom

Reputation: 313

pausing jquery countdown timer button

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();
}

Upvotes: 0

Views: 1681

Answers (2)

Brian FitzGerald
Brian FitzGerald

Reputation: 3109

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!

Upvotes: 1

Joshua JLIVE Williams
Joshua JLIVE Williams

Reputation: 144

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.

Upvotes: 1

Related Questions