Using JavaScript to Stop a Timer

The best way to use JavaScript to stop a timer we have created is by using the clearInterval() and clearTimeout() methods. The clearInterval() method in JavaScript clears the timer which has been set by a setInterval() method.

var interval = setInterval(function(){
  //Code that will run every 1000 milliseconds
  if( //some condition ){
    //This will stop the timer
    clearInterval(interval);
  }
}, 1000);

And the clearTimeout() method in JavaScript clears the timer which has been set by a setTimeout() method.

var interval = setTimeout(function(){
  //Code that will run every 1000 milliseconds
  if( //some condition ){
    //This will stop the timer
    clearTimeout(interval);
  }
}, 1000);

Creating a JavaScript Timer and Using JavaScript to Stop the Timer

In this example, we will create a simple countdown timer using JavaScript, and then we will use JavaScript to stop the timer whenever we please.

You can look at the post we have linked above to see how to create a countdown timer. We will create a countdown timer that will run for 10 seconds.

Here is the initial HTML setup:

<div id="div1">
  <div id="click-me" onclick="startCountdown()">Start Countdown</div>
  <div id="click-me" onclick="stopCountdown()">Stop Countdown</div>
  <div id="countdown-text"></div>
</div>

To make this countdown timer happen, we will use the setTimeout() method and the setInterval() method. We will use 10 seconds as the start number for the timer.

While the setTimeout() method is waiting to execute its function call, we will provide the user with a countdown by using the setInterval() method. The setInterval() method will run every second until it is told to stop.

Inside the setInterval() method, we will run a function that runs every second. The function will display how many seconds remain in the countdown timer. We will use the innerHTML property to update the text for the user.

We will end the setInverval() method using the clearInterval() method when our counter has reached 0, OR we will stop the timer by using the clearInterval() and clearTimeout() methods when the user clicks the stop timer button we have provided.

Finally, in our setTimeout() method we will have an alert box alert the user when the countdown timer is done. We will also add some code to make it so the user can’t run the countdown timer again until it has completed its cycle.

Here is the JavaScript code:

//The variable below will just make it so the user cannot run the setTimeout method more than once at a time
var isSetTimmeoutRunning = false;
var timeoutInterval;
var interval;
var timerSeconds;
  
function startCountdown(){

  if( isSetTimmeoutRunning == false ){
      //We set this variable to true when we first run the setTimeout method.
      //It will get set back to false when the setTimeout method has completed
      isSetTimmeoutRunning = true;

      //Next, we will set our countdown timer to 60 seconds, or 60000 milliseconds
      timerSeconds = 10;
      var timerMilliseconds = 10000;
    
      timeoutInterval = setTimeout(function(){
        isSetTimmeoutRunning = false;
        //Send alert message to the user
        alert("10 seconds have passed.");
      }, timerMilliseconds);
    
      document.getElementById("countdown-text").innerHTML = "<b>" + timerSeconds + "</b>";

      interval = setInterval(function(){
        timerSeconds--;
        document.getElementById("countdown-text").innerHTML = "<b>" + timerSeconds + "</b>";
        if( timerSeconds == 0 ){
          document.getElementById("countdown-text").innerHTML = "";
          clearInterval(interval);
        }
      }, 1000);
  }
};

Next we will create a simple stopCountdown() function, that will just clear the timers we set in the function above.

function stopCountdown(){
  clearInterval(interval);
  clearTimeout(timeoutInterval);
  isSetTimmeoutRunning = false;
  document.getElementById("countdown-text").innerHTML = "";
  alert("Timer stopped!");
};

The final code and output for this example of how to create and stop a JavaScript timer is below:

Code Output:

Full Code:

<div id="div1">
  <div id="click-me" onclick="startCountdown()">Start Countdown</div>
  <div id="click-me" onclick="stopCountdown()">Stop Countdown</div>
  <div id="countdown-text"></div>
</div>

<script>

var isSetTimmeoutRunning = false;
var timeoutInterval;
var interval;
var timerSeconds;
  
function startCountdown(){

  if( isSetTimmeoutRunning == false ){
      isSetTimmeoutRunning = true;
      timerSeconds = 10;
      var timerMilliseconds = 10000;
    
      timeoutInterval = setTimeout(function(){
        isSetTimmeoutRunning = false;
        alert("10 seconds have passed.");
      }, timerMilliseconds);
    
      document.getElementById("countdown-text").innerHTML = "<b>" + timerSeconds + "</b>";

      interval = setInterval(function(){
        timerSeconds--;
        document.getElementById("countdown-text").innerHTML = "<b>" + timerSeconds + "</b>";
        if( timerSeconds == 0 ){
          document.getElementById("countdown-text").innerHTML = "";
          clearInterval(interval);
        }
      }, 1000);
  }
};

function stopCountdown(){
  clearInterval(interval);
  clearTimeout(timeoutInterval);
  isSetTimmeoutRunning = false;
  document.getElementById("countdown-text").innerHTML = "";
  alert("Timer stopped!");
};

</script>

Hopefully this article has been useful for you to understand to use javascript to stop a timer.