Reset interval JavaScript

Clear the interval using clearInterval and setInterval once again Reset the interval in JavaScript.

clearInterval(timer);

Reset interval JavaScript

A simple example code with the function resetTimer is where we are trying to implement the code. So the webpage will display a page with a timer and three buttons; stop, start and reset.

When a user clicks the reset button, the timer is supposed to reset back to zero and make the timer reset to 00:00:00

<!DOCTYPE html>
<html>
<body>
  <div id="timer-text"></div>
  <button id="start">start</button>
  <button id="restart">restart</button>
  <button id="stop">stop</button>
</body>
<script>
  const timerEl = document.getElementById("timer-text")
  const startBtn = document.getElementById("start")
  const restartBtn = document.getElementById("restart");
  const stopBtn = document.getElementById('stop');

  let runTheClock;
  let seconds = 0;
  render(seconds);

  function makeTwoNumbers(num) {
    return ((num < 10) ? "0" : "") + num;
  }

  function tick() {
    seconds++;
    render(seconds);
  }

  function render(secs) {

    const hours = Math.floor(secs / 3600);
    const minutes = Math.floor(secs / 60) - (hours * 60);
    const seconds = secs % 60;

    const val = [hours, minutes, seconds].map(makeTwoNumbers).join(":");
    console.log(val);
    timerEl.textContent = val;
  }

  function runTimer() {
    runTheClock = setInterval(tick, 1000);
  }

  function stopTimer() {
    clearInterval(runTheClock)
  }

  function resetTimer() {
    seconds = 0;
    render(seconds);
  }

  restartBtn.addEventListener("click", resetTimer);
  stopBtn.addEventListener("click", stopTimer);
  startBtn.addEventListener("click", runTimer);

</script>
</html>

Output:

Here’s another example:

// Set up an interval
var myInterval = setInterval(function() {
    // Code to be executed repeatedly
    console.log('Interval function executed');
}, 1000); // Interval set to 1000 milliseconds (1 second)

// To reset or clear the interval after a certain condition or time
setTimeout(function() {
    clearInterval(myInterval);
    console.log('Interval cleared');
}, 5000); // Clear the interval after 5 seconds

In this example, the setInterval function is used to execute a function repeatedly at intervals of 1000 milliseconds (1 second). The clearInterval function is then used inside a setTimeout function to clear the interval after 5 seconds.

How do I reset a setInterval timer back to 0?

Answer: If you want to start a new 4-second interval, you must stop and restart the timer.

function myFn() {console.log('idle');}

var myTimer = setInterval(myFn, 4000);

// Then, later at some future time, 
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);

Source: stackoverflow.com

Do comment if you have any doubts or suggestions on this Js interval topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

Reset interval JavaScript | Example code