JavaScript Timers – setTimeout() vs setInterval()


JavaScript provides two main timer functions to run code after a delay or repeatedly at intervals: setTimeout() and setInterval().



1. setTimeout() - Run Once After a Delay

The setTimeout() method executes a function once after a specified number of milliseconds.



Syntax:

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


Example:

setTimeout(() => {
          console.log("This message appears after 2 seconds!");
        }, 2000);

Output (after 2 seconds):

This message appears after 2 seconds!


2. setInterval() - Run Repeatedly at Intervals

The setInterval() method calls a function repeatedly every set number of milliseconds.



Syntax:

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


Example:

setInterval(() => {
          console.log("This message appears every 1 second!");
        }, 1000);

Output:

This message appears every 1 second!
        (Repeated every second)


3. Stopping the Timers

Both methods return a timer ID that you can use to stop them.



Stop setTimeout with clearTimeout():

const timeoutId = setTimeout(() => {
          console.log("You won't see this if cleared");
        }, 3000);
        
        clearTimeout(timeoutId);  // Cancels the timeout


Stop setInterval with clearInterval():

let count = 0;
        const intervalId = setInterval(() => {
          count++;
          console.log(`Count: ${count}`);
          if (count === 5) {
            clearInterval(intervalId);  // Stop after 5 counts
          }
        }, 1000);


4. Real-World Use Cases

setTimeout():

  • Delayed popups or messages
  • Splash screen delays
  • Executing animations after a wait

setInterval():

  • Clocks or timers
  • Auto-updating dashboards
  • Repeating animations