How to wait 5 seconds in JavaScript?

Tim Mouskhelichvili
Tim Mouskhelichvili
2 minutes to read

There is a lot of use cases where you would want to pause your JavaScript's execution before running the next line.

Sadly, a function like that is absent from JavaScript's default functionality.

Luckily for us, JavaScript provides a few ways for a developer to wait X seconds before executing the next line of the code.

To complete this task, first of all, you will need to transform seconds into milliseconds.

To transform seconds into milliseconds you will need to multiply your seconds by 1000.

Example:

  • 5 seconds = 5000 milliseconds
  • 1 second = 1000 milliseconds

Here are three methods that will help you implement it yourself:

1. How To Wait 5 Seconds With A Helper Function

This method will not work if you need to support legacy browsers.

javascriptconst sleep = async (milliseconds) => {
    await new Promise(resolve => {
        return setTimeout(resolve, milliseconds)
    });
};

const testSleep = async () => {
    console.log('Step 1 - Called');
    await sleep(5000);
    console.log('Step 2 - Called');
}

testSleep();

2. How To Wait 5 Seconds In A Loop

Here, we are reusing the sleep helper function that we made earlier.

javascriptconst sleep = async (milliseconds) => {
    await new Promise(resolve => {
        return setTimeout(resolve, milliseconds)
    });
};

const testSleep = async () => {
    for (let i = 0; i < 10; i++) {
        await sleep(1000);
        console.log(i);
    }

    console.log("The loop is finished :)");
}

testSleep();

3. How To Wait 5 Seconds In ES5

If you need to support old browsers 😞, you will not be able to use Promises or async & await.

In that case you will need to use callbacks.

javascriptvar testSleep = function () {
    console.log('Step 1 - Called');
    setTimeout(function () {
        console.log('Step 2 - Called');
    }, 5000);
}

testSleep();

4. Wait 5 Seconds in ES5 (DO NOT USE).

Another way to pause your code for 5 seconds is to use the Date object with a while statement.

This is very inefficient (because it runs on the main thread).

It is only provided here for educational purposes.

javascriptfunction syncDelay(milliseconds){
    var start = new Date().getTime();
    var end = 0;

    while((end - start) < milliseconds){
        end = new Date().getTime();
    }
}

console.log('Step 1 - Called');
syncDelay(5000);
console.log('Step 2 - Called');

Conclusion

Now you know how to wait 5 seconds before executing your next line.

Of course, you can wait for however long you want 😉 it was just an example.

JavaScript Wait 5 Seconds

Thanks for reading this article. If you liked it please share it.

Comments (0)
Reply to: