JavaScript

Mastering setTimeout() in JavaScript

📌 Introduction

The setTimeout() function in JavaScript is used to execute a piece of code or a function after a specified amount of time (in milliseconds). It is widely used for scheduling tasks, animations, and delayed execution. 🚀

>>"Think of setTimeout() as a timer that triggers your code once the countdown ends."

🔑 Syntax

setTimeout() Syntax

let timeoutID = setTimeout(function, delay, param1, param2, ...);

- function: The function to execute after the delay.
- delay: Time in milliseconds (1000 ms = 1 second).
- param1, param2... (optional): Parameters passed to the function.
- timeoutID: A unique ID for the timeout, useful if you want to cancel it.

💡 Example Usage

Basic Example

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

With Function Reference

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

setTimeout(greet, 3000, "Sathish"); // Executes after 3 seconds

Canceling a Timeout

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

clearTimeout(id); // Cancels the timeout

⚙️ How It Works

setTimeout() starts a timer.
Once the delay finishes, the function is added to the event queue.
It executes after the current call stack is clear (event loop behavior).
clearTimeout() can be used to stop it.

🧠 Practical Use Cases

Showing notifications after a short delay.
Creating timed pop-ups or messages.
Simulating delays in animations.
Retrying tasks after a pause.

⚠️ Things to Remember

Note

Delay is in milliseconds (1000 ms = 1s).
The actual execution might be slightly delayed due to the event loop.
Passing string code (e.g., setTimeout("alert('Hi!')", 1000)) is discouraged. Always use functions.
For repeated execution, use setInterval() instead.

🔥 Comparison with setInterval()

Feature	setTimeout()	setInterval()
Execution	Runs once after the delay	Runs repeatedly at intervals
Stop Method	clearTimeout()	clearInterval()

🌟 Conclusion

The setTimeout() function is an essential tool for delayed execution in JavaScript. It’s perfect for scheduling one-time tasks, animations, or reminders. Mastering it alongside setInterval() gives you powerful control over time-based operations. ⏰

Learn more on MDN