JavaScript

Mastering setInterval() in JavaScript

📌 Introduction

The setInterval() function in JavaScript is used to repeatedly execute a function at a specified time interval (in milliseconds). Unlike setTimeout() which runs once,setInterval() keeps running until explicitly stopped. 🔁

>>"Use setInterval() when you need to run code continuously at fixed time intervals."

🔑 Syntax

setInterval() Syntax

let intervalID = setInterval(function, delay, param1, param2, ...);

- function: The function to execute repeatedly.
- delay: Time in milliseconds (1000 ms = 1 second).
- param1, param2... (optional): Parameters passed to the function.
- intervalID: A unique ID for the interval, used to stop it.

💡 Example Usage

Basic Example

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

With Function Reference

function greet(name) {
  console.log("Hello, " + name + "!");
}

setInterval(greet, 3000, "Sathish"); // Runs every 3 seconds

Stopping an Interval

let count = 0;

let id = setInterval(() => {
  count++;
  console.log("Count:", count);

  if (count === 5) {
    clearInterval(id); // Stops after 5 executions
    console.log("Interval cleared!");
  }
}, 1000);

⚙️ How It Works

setInterval() starts a repeating timer.
Runs the callback function after every given delay.
Execution continues until clearInterval() is called.
Delay is approximate and depends on event loop timing.

🧠 Practical Use Cases

Updating a digital clock in real-time. ⏱️
Refreshing live data periodically.
Running animations or slideshows.
Auto-saving user data at intervals.

⚠️ Things to Remember

Note

Always stop intervals using clearInterval() when no longer needed.
Excessive intervals can cause performance issues. 🐢
Execution timing may not be exact due to event loop delays.
For one-time delays, use setTimeout() instead.

🔥 Comparison: setTimeout() vs setInterval()

Feature	setTimeout()	setInterval()
Execution	Runs once after a delay	Runs repeatedly at intervals
Stop Method	clearTimeout()	clearInterval()
Use Case	Delays & single-time tasks	Timers & repeated tasks

🌟 Conclusion

The setInterval() function is perfect for running code repeatedly, such as timers, animations, or background tasks. Just remember to clear it when no longer needed to avoid memory leaks. 🚀

Learn more on MDN