How to stop my javascript countdown by clicking a button?

Question

I have a start button for my countdown, but i want it to stop when i click the stop button.

my html code:

<div>
  <span id="timer">25:00</span>
</div> 

Start Stop

my js code:

$('#startTimerButton').click(function starter() {

             function startTimer(duration, display) {
                var timer = duration, minutes, seconds;
                setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);

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

                    display.text(minutes + ":" + seconds);

                    if (--timer < 0) {
                        timer = duration;
                    }

                }, 1000);
            }

            jQuery(function ($) {
                var fiveMinutes = 60 * 25,
                    display = $('#timer');
                startTimer(fiveMinutes, display);
            }); 


    });

Answer 1

First, try to return your interval in the function:

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    timeInterval = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

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

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }

    }, 1000);
    return timeInterval;
}

Then, calling this function assign it to a variable so you can clear it later with:

var countTimeInterval = startTimer();
clearInterval(countTimeInterval);

Answer 2

connect the function with a variable like this: (Try without the 'var')

var my_timer = setInterval(function () { ...

And stop the timer with this function:

$("#stop_btn").click(function(){
    clearInterval(my_timer);
});

Answer 3

You need to clear the interval when a button is pressed. Suppose the button to stop is #stopTimerButton. Then, change your js to:

$('#startTimerButton').click(function starter() {

         function startTimer(duration, display) {
            var timer = duration, minutes, seconds;
            interval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

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

                display.text(minutes + ":" + seconds);

                if (--timer < 0) {
                    timer = duration;
                }

            }, 1000);
        }

        jQuery(function ($) {
            var fiveMinutes = 60 * 25,
                display = $('#timer');
            startTimer(fiveMinutes, display);
        }); 


});
$('#stopTimerButton').click(function() {
    clearInterval(interval);
});

Answer 4

You need to use the function clearInterval to stop the timer.

$(document).ready(function() {
var handler;

$('#stopTimerButton').click(function () {
    if (handler) {
        clearInterval(handler);
    }
});

$('#startTimerButton').click(function starter() {

             function startTimer(duration, display) {
                var timer = duration, minutes, seconds;
                handler = setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);

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

                    display.text(minutes + ":" + seconds);

                    if (--timer < 0) {
                        timer = duration;
                    }

                }, 1000);
            }

            jQuery(function ($) {
                var fiveMinutes = 60 * 25,
                    display = $('#timer');
                startTimer(fiveMinutes, display);
            });
    });
});