How to Wait n Seconds in JavaScript?

Here are the various methods to wait n seconds in JavaScript

1. Using setTimeout() Function

setTimeout() is an asynchronous function in JavaScript that allows you to run code after a specific amount of time has passed. Since setTimeout() is a method of the window object, you can technically write it as window.setTimeout().

Syntax

setTimeout(function_name, time);

• function_name: The function you want to run after the delay. It can be a named function or an anonymous one.
• time: The delay time in milliseconds (1000 ms = 1 second). This is how long JavaScript waits before executing the function.

Note: setTimeout() returns a timeoutID, which is a positive integer used to identify the timer created by setTimeout().

Now, let us understand with the help of the example:

console.log("Start waiting...");

setTimeout(() => {
    console.log("Waited 3 seconds!");
}, 3000);  // Waits for 3000 milliseconds (3 seconds)

In this example

• The first console.log() prints immediately.
• setTimeout() waits for 3000 milliseconds (3 seconds) and then runs the provided callback function, printing "Waited 3 seconds!".
• The program continues running other code while waiting.

Output

2. Using Promises with async/await

You can create a more readable delay using Promises combined with async/await. This method pauses the execution of code at specific points and only continues after the specified time.

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

async function wait() {
    console.log("Start waiting...");
    await sleep(3000);  // Waits for 3 seconds
    console.log("Waited 3 seconds!");
}

wait();

• The sleep() function returns a Promise that resolves after the specified milliseconds using setTimeout().
• The wait() function is async, meaning it can use await to pause the function until the Promise is resolved (after 3 seconds).
• The program first prints "Start waiting...", then waits for 3 seconds, and prints "Waited 3 seconds!".

Output

3. Using clearTimeout() Method

If you've set a timer using setTimeout() but later decide you want to cancel the action before it happens, you can use the clearTimeout() method. This allows you to stop the function from being executed.

Syntax

clearTimeout(timeoutID);

• timeoutID: The ID returned by setTimeout(), which uniquely identifies the timeout. You need to save this ID to a variable when you create the timeout.
• Call clearTimeout() with this timeoutID to cancel the timeout before it executes the function.

let timeoutID = setTimeout(function () {
    console.log("Good Night");
}, 2000);

// Cancel the timeout before it runs
clearTimeout(timeoutID);

console.log("Good Morning!");

In this example

• "Good Night" is never printed because clearTimeout() cancels the scheduled action.
• "Good Morning!" is printed immediately, as the timeout was cleared before it triggered.

4. Using Modern Web APIs (e.g., Promise.all() with setTimeout)

For more complex scenarios where you need to handle multiple delays or asynchronous operations at the same time, you can use modern Web APIs like Promise.all() along with setTimeout() to run multiple timers simultaneously.

const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function waitM() {
    console.log("Waiting for multiple events...");

    await Promise.all([wait(3000), wait(5000)]);  // Wait for 3 seconds and 5 seconds
    console.log("Both events waited!");
}

waitM();

• The wait() function returns a Promise that resolves after the specified time using setTimeout().
• Promise.all() is used to run multiple promises concurrently. In this case, it waits for both 3-second and 5-second delays to complete.
• The program prints "Both events waited!" after both delays are finished.

Output

Waiting for multiple events...
Both events waited!

Conclusion

To wait for a specific number of seconds in JavaScript, you can use setTimeout() for simple delays, which triggers a function after a set time in milliseconds. For more complex scenarios, Promise combined with async/await provides a cleaner way to pause execution until a delay is complete, making it ideal for handling asynchronous operations in a more readable way.