How to call a function after setTimeout in JavaScript? (5 Simple Methods)

Do you want to know How to call a function after settimeout in javascript?

If you want to display a notification or alert after a delay, using the setTimeout method is very helpful.

To learn the correct way to call a function after an setTimeout() in JavaScript, follow the methods mentioned in this blog post.

Method 1: Directly Inside setTimeout

setTimeout(() => {
    console.log("Timeout finished!");
    myFunction(); // Call the function after timeout
}, 2000);

function myFunction() {
    console.log("Function called after timeout");
}

If you’re looking for an easy solution, Method 1 is a great choice because it’s beginner-friendly and easy to understand.

Here’s how the above code works, along with a simple explanation.

setTimeout waits for 2 seconds (2000 milliseconds) before executing the code inside the arrow function {}.

After 2 seconds, it prints “Timeout finished!” and then calls myFunction().

myFunction() logs “Function called after timeout”.

Also See: JavaScript Push Object to Array (5 Simple Methods)

Method 2: Using an Anonymous Function

If you need a code that works anonymously, Method 2 is a great option. With this method, you can run functions anonymously.

Instead of using an arrow function, this method uses a traditional function inside setTimeout.

The function calls myFunction() after 2 seconds.

setTimeout(function() {
    myFunction();
}, 2000);

Method 3: Passing Function Reference

setTimeout(myFunction, 2000); // No need to wrap in an anonymous function

In Method 3, I’ve shown you a simpler and more straightforward approach. You only need to add the code reference and specify the delay time, and that’s it!

setTimeout(myFunction, 2000) directly passes the function reference (myFunction) instead of wrapping it in another function.

This is a shorthand when the function doesn’t need parameters.

Method 4: Using Promises (Async/Await)

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function runAfterDelay() {
    await delay(2000);
    myFunction();
}

runAfterDelay();

If you’re looking for an advanced method that utilizes Promises along with async and await, follow this approach:

delay(ms) returns a Promise that resolves after ms milliseconds.

runAfterDelay() is an async function that waits (await) for delay(2000) before calling myFunction().

This is useful if you’re working with async/await patterns and want better control over execution.

Method 5: Chaining Another Function After setTimeout

To achieve the same functionality using the chaining method, use this approach.

After 2 seconds, “First function executed” is printed.

Then anotherFunction() is called, which logs “Another function executed after timeout”.

This is useful when you want to execute multiple steps in sequence.

setTimeout(() => {
    console.log("First function executed");
    anotherFunction();
}, 2000);

function anotherFunction() {
    console.log("Another function executed after timeout");
}

Which One Should You Use?

All four methods mentioned in this blog post serve different purposes. To achieve the best results, follow this approach:

Use method 3 (setTimeout(myFunction, 2000)) if you’re calling a simple function without parameters.
Use method 1 or 2 if you need to run multiple lines of code inside setTimeout.
Use method 4 (Promise + async/await) for better control in asynchronous operations.
Use method 5 if you need to chain multiple functions.

Conclusion

I hope this blog post helps you understand how to call a function after setTimeout in JavaScript. You might also find these articles interesting: How to Take User Input in JavaScript Without Prompt? (4 Simple Methods), How to Disable HTML Code Without Deleting? (6 Methods), and How to Validate a Form in JavaScript Before Submission? (Simple Steps).

If you enjoyed this blog post, subscribe to our YouTube channel for more amazing videos on web development and coding tips.

On this page