TypeScript: setInterval() and clearInterval() methods (3 examples)

Overview

Managing time-sensitive operations in TypeScript often involves setting up repetitive actions or cancelling them altogether. Two of the most commonly used methods for these purposes are setInterval() and clearInterval(). In this guide, we will explore how to utilize these methods effectively with TypeScript, along with three practical examples to demonstrate their use.

First, let’s get to know what setInterval() and clearInterval() are. setInterval() is a method used to execute a function or a given piece of code at every specified time interval. To stop these executions, clearInterval() is used, which clears the interval set by setInterval().

Example 1: Basic Usage of setInterval() and clearInterval()

The syntax of setInterval() looks like this:

const intervalID = window.setInterval(func, delay, [arg1, arg2, ...]);

Where func is the function you want to execute, delay is the time in milliseconds between each execution, and the optional arguments (arg1, arg2,...) are the parameters that you can pass to the function.

Similarly, to clear an interval, you use:

window.clearInterval(intervalID);

Let’s see a simple TypeScript example:

const sayHello = () => console.log('Hello, TypeScript world!');
const intervalId = setInterval(sayHello, 1000);

setTimeout(() => {
  clearInterval(intervalId);
  console.log('Stopped saying hello.');
}, 5000);

This example will log ‘Hello, TypeScript world!’ to the console every second for 5 seconds before stopping.

Example 2: Using setInterval() with Classes

TypeScript’s strong typing system can be leveraged to ensure more reliable code when using intervals within a class. Here’s how you can do it:

class Repeater {
  private count: number = 0;
  private intervalId: number | undefined;

  startRepeating(): void {
    this.intervalId = window.setInterval(() => {
      this.count++;
      console.log('Count:', this.count);
    }, 1000);
  }

  stopRepeating(): void {
    if (this.intervalId) {
      window.clearInterval(this.intervalId);
      this.intervalId = undefined;
    }
  }
}

const myRepeater = new Repeater();
myRepeater.startRepeating();
setTimeout(() => myRepeater.stopRepeating(), 5000);

In this example, a Repeater class is defined with methods to start and stop a repeating action. This showcases how intervals can be used within the structured environment of a class.

Example 3: Parameter Passing

Passing parameters to the function executed by setInterval() is straightforward. Here’s how you can do it in TypeScript, utilizing arrow functions to maintain the correct scope:

const printMessage = (message: string) => console.log(message);

const intervalId = setInterval(() => printMessage('Hello with parameters!'), 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 4000);

This will log ‘Hello with parameters!’ to the console every second for 4 seconds. Through parameter passing, setInterval() becomes more versatile, allowing for more dynamic execution of the function.

Wrapping Up

Understanding and effectively utilizing setInterval() and clearInterval() can significantly aid in managing repetitive tasks within your TypeScript projects. This guide has covered the basics along with several examples to help you get started.

Always remember to clear intervals when they’re no longer needed to prevent memory leaks or undesired executions. Happy coding!