JavaScript Window setTimeout() Method

What You’ll Learn

The setTimeout() method runs a function once after a delay. This tutorial covers syntax, timeout IDs, asynchronous execution order, passing arguments, canceling with clearTimeout(), comparison with setInterval(), five examples, and common patterns like toasts and debouncing.

Introduction

Not everything should happen instantly. Toast notifications disappear after a few seconds, search boxes wait until the user stops typing, and welcome messages appear after a short pause. The setTimeout() method schedules a callback to run once after a delay in milliseconds.

Timers are asynchronous: JavaScript keeps running while the clock counts down. That keeps pages responsive. Store the returned timeout ID if you might need to cancel the scheduled work with clearTimeout() before it fires.

Understanding the setTimeout() Method

setTimeout(callback, delayMs, arg1, arg2, ...) registers callback to run one time after at least delayMs milliseconds. It returns a numeric ID immediately; the callback is not invoked synchronously.

Minimum delays are clamped in browsers (often ~4ms). Background tabs may throttle timers heavily. For repeating work, use setInterval() or chain recursive setTimeout() calls when you need pauses between runs.

📝 Syntax

General form of setTimeout():

const timeoutId = setTimeout(callback, delayMs, param1, param2);

// shorthand (same in browsers):
const id = setTimeout(greet, 2000);

Parameters

• callback — function executed once after the delay.
• delayMs — milliseconds to wait. Use 1000 for one second.
• param1, param2, ... (optional) — values passed to callback.

Return value

• A numeric timeout ID. Pass it to clearTimeout() to cancel.

Related APIs

• clearTimeout(id) — cancel a pending timeout.
• setInterval(fn, ms) — repeat on a timer.
• clearInterval(id) — stop a repeating timer.
• queueMicrotask(fn) — run before the next timer (microtask queue).

Examples Gallery

Use the Try-it links to schedule delayed callbacks in the browser. Watch execution order and learn when to cancel timers.

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

setTimeout(greet, 2000);

Hello, world!

console.log("This runs immediately.");

setTimeout(function () {
  console.log("This runs after 2 seconds.");
}, 2000);

console.log("This also runs immediately.");

This runs immediately.
This also runs immediately.
(after 2s)
This runs after 2 seconds.

const timerId = setTimeout(function () {
  console.log("This will run unless cleared.");
}, 3000);

clearTimeout(timerId);
console.log("Timeout cancelled.");

Timeout cancelled.
( delayed message never appears )

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

setTimeout(greet, 1500, "World");

Hello, World!

function showToast(message) {
  const el = document.getElementById("toast");
  el.textContent = message;
  el.hidden = false;

  setTimeout(function () {
    el.hidden = true;
  }, 3000);
}

showToast("Saved successfully!");

Toast appears → visible 3 seconds → hidden automatically.

🚀 Common Use Cases

• Delayed messages — show content after a welcome pause.
• Toasts and alerts — auto-dismiss after a few seconds.
• Debounced search — wait until typing stops (with clearTimeout).
• Animation steps — chain short delays between CSS changes.
• Retry logic — attempt an API call again after backoff.
• Focus management — move focus after a modal opens.

📝 Notes

• Never pass a string as the callback—use functions only.
• setTimeout(fn, 0) does not run instantly; it queues after current synchronous code.
• Recursive setTimeout can replace setInterval when delays must vary.
• Background tabs throttle timers; do not rely on sub-second precision there.
• For repeating logs every second, prefer setInterval over recursive timeout unless you need dynamic spacing.
• Modern apps often use async/await with Promises, but setTimeout remains the underlying browser primitive.

💡 Best Practices