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 press the stop button.

my html code is:

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

Start stop

my js code is:

 $('#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 returning your interval to a 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, by calling this function, assign it to a variable so that you can clear it later:

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

Answer 2

bind the function to a variable as follows: (Try without 'var')

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

And stop the timer using this function:

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

Answer 3

You need to clear the interval when the button is pressed. Suppose the stop button is #stopTimerButton . Then change 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 clearInterval function 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); }); }); });