How to Create a Sleep function in JavaScript

Sleeping can be a useful feature to implement in your code.
It can be used to wait for a certain amount of time before executing the next line of code.
In this article, we will learn how to implement a sleep function in JavaScript.
How to implement a function to sleep in JavaScript
The issue with sleep functions in JavaScript is that they are not blocking.
This means that the code will continue to execute while the sleep function is running.
One way to implement a sleep function is to use the setTimeout
function in conjunction with a Promise
.
The setTimeout
function takes a callback function as its first argument and a time in milliseconds as its second argument.
Let's see an example:
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
console.log("Hello");
sleep(1000).then(() => {
console.log("World");
});
This will print Hello
to the console immediately and World
after 1 second after the promise is resolved.
This works but it is not very elegant, especially because you have to use the then
function and nest the code inside of it.
Another way to implement a sleep function is to use the async
and await
keywords.
Let's see an example using async
/await
:
const sleep = async (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
console.log("Hello");
await sleep(1000);
console.log("World");
Like before this will also print Hello
immediately, then after a second it will print World
.
This is a lot cleaner than the previous example while keeping the functionality the same.
Conclusion
In this post, we learned how to implement a sleep function in JavaScript.
For the best results, use the async
/await
syntax with the Promise
object.
Thanks for reading!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!