JavaScript Timers & Intervals

You are reading Part 13 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 2]

Introduction

JavaScript provides built-in functions for handling time-based operations: setTimeout() and setInterval(). These functions allow developers to schedule the execution of code at a later time or repeatedly at fixed intervals.

JavaScript’s setTimeout() and setInterval() are essential for managing time-based operations. While setTimeout() executes a function once after a delay, setInterval() runs repeatedly at fixed intervals. Proper use of clearTimeout() and clearInterval() ensures efficient memory management and prevents unwanted execution of delayed or repeated functions.

1. Using setTimeout()

The setTimeout() function executes a function or code snippet after a specified delay (in milliseconds).

Syntax:

setTimeout(function, delay, param1, param2, ...);

Example:

setTimeout(() => {
    console.log("Hello after 3 seconds");
}, 3000); // Executes after 3 seconds

Clearing a Timeout

To cancel a scheduled timeout before it executes, use clearTimeout().

let timeoutId = setTimeout(() => {
    console.log("This will not run");
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

2. Using setInterval()

The setInterval() function repeatedly executes a function at fixed time intervals (in milliseconds).

Syntax:

setInterval(function, interval, param1, param2, ...);

Example:

setInterval(() => {
    console.log("This message repeats every 2 seconds");
}, 2000);

Clearing an Interval

To stop a repeating interval, use clearInterval().

let intervalId = setInterval(() => {
    console.log("This will stop after 5 seconds");
}, 1000);

setTimeout(() => {
    clearInterval(intervalId); // Stops the interval
}, 5000);

3. Practical Use Cases

• Delaying execution of code: Displaying a welcome message after a short delay.

• Repeating tasks: Updating a clock or auto-refreshing data.

• Creating animations: Moving elements at timed intervals.

• Handling API polling: Fetching data at regular intervals.

Example: Creating a Simple Timer

let count = 0;
let counter = setInterval(() => {
    console.log("Counter: ", count);
    count++;
    if (count > 5) {
        clearInterval(counter);
    }
}, 1000);

You are reading Part 13 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 2]