Skip to main content

How to Fix setTimeout Not Working in JavaScript

The setTimeout function is a fundamental part of asynchronous JavaScript, but it's a common source of confusion for beginners. When setTimeout appears "not to work," it's almost always due to one of two simple mistakes: invoking the callback function immediately instead of passing a reference to it, or a misunderstanding of the JavaScript event loop.

This guide will explain both of these common pitfalls and show you the correct way to use setTimeout, including how to pass arguments to your callback function.

The Core Problem (Most Common): Invoking the Callback Immediately​

The first argument to setTimeout must be a function reference—the name of the function or an anonymous function expression. A very common mistake is to add parentheses () after the function name, which invokes the function immediately.

Example of the problem:

function greet() {
  console.log('Hello, World!');
}

// PROBLEM: The parentheses `()` call greet() right away.
// The return value of greet() (which is `undefined`) is passed to setTimeout.
setTimeout(greet(), 1000);

console.log('This will be logged second.');

Incorrect Output:

Hello, World!
This will be logged second.
// (Nothing happens after 1 second)
note

The greet() function runs instantly, and the timeout is never properly scheduled.

The Solution: Pass a Function Reference​

To fix this, you must pass the function itself, without the parentheses. This gives setTimeout a reference to the function that it can call later.

function greet() {
  console.log('Hello, World!');
}

// CORRECT: Pass the function reference (no parentheses).
setTimeout(greet, 1000);

console.log('This will be logged first.');

Correct Output:

This will be logged first.
// (After a 1-second delay...)
Hello, World!

How to Pass Arguments to the Callback Function​

If your callback function requires arguments, you cannot simply pass them like setTimeout(greet('Alice'), 1000), as this would cause the same "immediate invocation" problem. There are two correct ways to do this.

Any arguments you pass to setTimeout after the delay argument will be passed along to your callback function. This is the cleanest and most readable method.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

// The string 'Alice' is passed as an argument to `greet`.
setTimeout(greet, 1000, 'Alice');

Output (after 1 second):

Hello, Alice!

Solution B: Using an Anonymous Wrapper Function​

You can also wrap your function call inside another (anonymous) function. This is useful for more complex logic.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

// The arrow function `() => greet('Bob')` is passed to setTimeout.
setTimeout(() => {
  greet('Bob');
}, 1000);
note

Both of these methods correctly schedule the function call with the desired arguments.

A Common Misconception: setTimeout(..., 0) and the Event Loop​

Another source of confusion is setTimeout with a delay of 0. This does not run the function immediately. Instead, it places the callback in the event queue to be executed after the current synchronous code block has finished.

Problem: Unexpected Order

console.log('First');

setTimeout(() => {
  console.log('Second');
}, 0);

console.log('Third');

Solution: Understanding the Output The output will always be First, Third, then Second.

First
Third
Second
note

This is because the JavaScript engine will always finish executing all the code in the current "task" before it checks the event queue for any pending setTimeout callbacks. Even with a zero-millisecond delay, the callback has to wait its turn.

Conclusion​

If setTimeout is not working as you expect, the cause is almost always one of these two issues:

  1. You are invoking the function immediately with parentheses (myFunction()) instead of passing a reference (myFunction).
  2. You have a misunderstanding of the JavaScript event loop, especially with a 0ms delay. The callback will always run after the current block of synchronous code.

To fix these issues:

  • Remove the () from your callback function name.
  • To pass arguments, either add them after the delay argument in your setTimeout call (recommended) or use an anonymous wrapper function.

Table of Contents