How to stop timer in javascript?

Question

I want to stop a timer by clicking a button but I can't find the exact way. I've tried to stop a timer by clearInterval() but I'm not sure if it is called properly.

This is my working code.

<html>
<head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="setest_style.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
      var sec = 0;
      
      function pad(val) {
        return val > 9 ? val : "0" + val;
      };
      
      setInterval( function(){
        $("#seconds").html(pad(++sec%60));
        $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      
      function myStopFunction() {
        clearInterval(sec);
      }
    </script>
</head>
<body>
    <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

Possible duplicate of How to use setInterval and clearInterval? — H77
– H77, Commented Mar 22, 2018 at 9:50

Sherif · Accepted Answer · 2018-03-22 09:41:17Z

15

take that set interval into a variable then use clear interval

var myInterval = setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(myInterval);
      }

answered Mar 22, 2018 at 9:41

Sherif

1,5361 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

H.Mikhaeljan · Accepted Answer · 2018-03-22 09:41:51Z

Add a global var in this case myTimer to hold the timer. in clearinterval use myTimer to stop the timer.

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
      var myTimer= setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(myTimer);
      }
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

Sindhoor · Accepted Answer · 2018-03-22 09:58:43Z

Made correction and Added "Start again" and "Clear" Button also. working fine.

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
var func;
  

    function timerstart(){
func = setInterval( function(){
              $("#seconds").html(pad(++sec%60));
              $("#minutes").html(pad(parseInt(sec/60,10)));
          }, 1000);
}
timerstart();

          function myStopFunction() {
                  clearInterval(func);
          }
function myClearFunction(){
myStopFunction();
$("#seconds").html(pad(00));
              $("#minutes").html(pad(00));
sec = 0;
}
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
    

    <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
 <button href="#" id="show-explanation" class="button1" onclick="timerstart()">Start Again</button>
<button href="#" id="show-explanation" class="button1" onclick="myClearFunction();">Clear</button>
    </div>
</body>

</html>

Kalalakshmi · Accepted Answer · 2019-11-07 12:21:58Z

1

Stopwatch Timer Proper Code for 1 hour from 00:00:00

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var upgradeTime = 1;
var seconds = upgradeTime;
function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
     
  }
  document.getElementById('countdown').innerHTML =pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 3600) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Completed";
  } else {
    seconds++;
  }
}
var countdown = setInterval('timer()', 1000);

</script>
</head>
<body>
<span id="countdown" class="timer"></span>
</body>

</html>

answered Nov 7, 2019 at 12:21

Kalalakshmi

111 bronze badge

1 Comment

Jurgen Dictus Over a year ago

should it not be "clearInterval(countdown);" ?

John Willson · Accepted Answer · 2018-03-22 09:47:09Z

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
    var setIntValue =   setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(setIntValue);
      }
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

Mickaël Leger · Accepted Answer · 2018-03-22 09:56:23Z

-1

Add this

setTimeout(function(){
   clearInterval(sec);
}, 1000);

and no need function myStopFunction() remove that

edited Mar 22, 2018 at 9:56

Mickaël Leger

3,4482 gold badges21 silver badges37 bronze badges

answered Mar 22, 2018 at 9:46

CforCODE

957 bronze badges

1 Comment

ionizer Over a year ago

setTimeout() only executes once, so I don't know if this is what OP wants

Collectives™ on Stack Overflow

How to stop timer in javascript?

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related