How to stop an interval timer in javascript.
Published: 2023-11-03 15:32:20

Interval timers in JavaScript are used to repeatedly run a piece of code at specified time intervals. Sometimes, you might need to stop these timers. In this article, we'll explore how to do just that and provide straightforward examples to help you grasp the concept.

## Starting an Interval Timer

Before we get into stopping interval timers, let's see how you can start one. To create an interval timer, you use the `setInterval` function. It takes two things: a function to run and the time interval in milliseconds. Here's a quick example:

```javascript
function myFunction() {
  console.log("Interval timer is running!");
}

const timerId = setInterval(myFunction, 1000); // Runs every 1 second
```

In this example, the `myFunction` will execute every second, and `setInterval` gives you a unique identifier called `timerId`.

## Stopping an Interval Timer

Now, let's talk about stopping these interval timers. JavaScript provides a method called `clearInterval` to do just that. You pass the timer identifier to `clearInterval`, and it stops the associated timer. Here's how you can stop the timer from our earlier example:

```javascript
clearInterval(timerId); // Stops the timer
```

## Example: Creating a Timer with Start and Stop Buttons

let's build the example step by step. We'll create a simple countdown timer with "Start" and "Stop" buttons using HTML and JavaScript.

### Step 1: Create the HTML Structure

We'll start by creating the HTML structure for the timer and buttons. Save this as an HTML file (e.g., `timer.html`):

```html
<!DOCTYPE html>
<html>
<head>
  <title>Countdown Timer Example</title>
</head>
<body>
  <h1>Countdown Timer</h1>
  <div id="timer">10</div>
  <button id="startButton">Start</button>
  <button id="stopButton">Stop</button>

  <script src="timer.js"></script>
</body>
</html>
```

In this HTML structure, we have a heading for the timer, a `div` element to display the timer value, and two buttons: "Start" and "Stop." We also include a `<script>` tag to link an external JavaScript file named `timer.js`, where we'll write our code.

### Step 2: Create the JavaScript Logic

Now, let's create the JavaScript logic to handle the timer functionality. Create a new file named `timer.js`:

```javascript
// Define variables to track the timer and time left
let timerId;
let timeLeft = 10; // Set the initial time in seconds

// Function to update the timer display
function updateTimer() {
  // Get the timer element by its ID
  const timerElement = document.getElementById("timer");

  // Update the displayed time
  timerElement.textContent = timeLeft;

  // Decrease the time left by 1
  timeLeft--;

  // Check if time has run out
  if (timeLeft < 0) {
    clearInterval(timerId); // Stop the timer
    timerElement.textContent = "Time's up!";
  }
}

// Event listener for the "Start" button
document.getElementById("startButton").addEventListener("click", function() {
  if (!timerId) { // Check if the timer is not already running
    timerId = setInterval(updateTimer, 1000); // Start the timer (runs updateTimer every 1 second)
  }
});

// Event listener for the "Stop" button
document.getElementById("stopButton").addEventListener("click", function() {
  clearInterval(timerId); // Stop the timer
  timerId = null; // Reset the timer ID
});
```

In this JavaScript code:

- We define the `timerId` variable to keep track of the interval timer and `timeLeft` to store the remaining time in seconds.

- The `updateTimer` function updates the displayed time, decreases the `timeLeft` value, and stops the timer when the time runs out.

- Event listeners are set up for the "Start" and "Stop" buttons. The "Start" button starts the timer using `setInterval`, and the "Stop" button stops the timer using `clearInterval`.

### Step 3: Test the Countdown Timer

Open the HTML file (`timer.html`) in a web browser. You'll see the "Countdown Timer" heading, the timer display, and "Start" and "Stop" buttons. Click "Start" to begin the countdown, and click "Stop" to stop the timer.

That's it! You've successfully created a simple countdown timer with start and stop functionality using JavaScript. You can customize the initial time and the timer's behavior to suit your needs.
## Conclusion

In JavaScript, starting and stopping interval timers is a fundamental skill. You use `setInterval` to create timers and `clearInterval` to stop them by providing the timer's identifier. The example we provided demonstrates how to build a straightforward countdown timer with start and stop functionality, showcasing a practical application for these methods. Understanding how to handle interval timers is valuable for building interactive and responsive web applications.