How to Use setTimeout in JavaScript

Use setTimeout() when code should run once after a delay. This is perfect for loaders, dismissible alerts, delayed UI updates, onboarding tips, and retry waits.

What you’ll build or solve

You’ll learn how to use setTimeout in JavaScript with delayed callbacks and optional cancellation. You’ll also know how to avoid common timing mistakes.

When this approach works best

This approach is the right choice when an action should happen once after a known delay.

Common real-world scenarios include:

• Auto-close alerts
• Delayed redirects
• Tooltip onboarding
• Retry waits
• UI transition timing

This is a bad idea when code must repeat on an interval. In that case, use setInterval() instead.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic functions knowledge

Step-by-step instructions

Step 1: Pass a callback and delay in milliseconds

The first argument is the callback, and the second is the delay.

setTimeout(() => {
  console.log("Runs after 1 second");
}, 1000);

The delay is always in milliseconds.

A common use case is removing a temporary alert.

setTimeout(() => {
  document.querySelector(".alert").remove();
}, 3000);

Store the timeout ID when cancellation may be needed.

const timeoutId = setTimeout(() => {
  console.log("Delayed");
}, 2000);

What to look for:

• Delay is in milliseconds
• The callback runs once
• Great for delayed UI changes
• Store the timeout ID if it may be canceled
• Use setInterval() for repetition

Examples you can copy

Auto-close alert

setTimeout(() => {
  alertBox.remove();
}, 5000);

Delayed redirect

setTimeout(() => {
  window.location.href = "/dashboard";
}, 2000);

Retry wait

setTimeout(() => {
  fetchData();
}, 1000);

Common mistakes and how to fix them

Mistake 1: Calling the callback immediately

What the reader might do:

setTimeout(showAlert(), 1000);

Why it breaks: the function runs immediately instead of after the delay.

Corrected approach:

setTimeout(showAlert, 1000);

Mistake 2: Using seconds instead of milliseconds

What the reader might do:

setTimeout(loadData, 5);

Why it breaks: this waits only 5 milliseconds, not 5 seconds.

Corrected approach:

setTimeout(loadData, 5000);

Mistake 3: Using timeout for repeated behavior

What the reader might do:

setTimeout(updateClock, 1000);

Why it breaks: this runs only once.

Corrected approach:

Use setInterval() for repeated updates.

Troubleshooting

If the callback runs immediately, remove the parentheses.

If the delay feels too short, convert seconds to milliseconds.

If the behavior needs repetition, switch to setInterval().

If the timeout should stop, store the timeout ID.

Quick recap

• Use setTimeout() for one delayed action
• Pass a callback reference
• Delay uses milliseconds
• Store the timeout ID if needed
• Use setInterval() for repetition