JavaScript

JavaScript Sleep Function


Javascript is the language of freedom yet is a function-oriented language at the same time. Unlike other languages, javascript does not provide a built-in sleep() function. You can either build a custom sleep() function using the built-in setTimeout() function, or the latest ECMAScript promises an async-await function. This article shows you how to stop or pause the execution of the sleep function for a desired amount of time using promises or async-await functions.

Before Starting

Before you start to build a sleep function, you need to understand that the setTimeout() function does not work if you expect it to stop the execution. Many programmers and developers try to use the function with loops but fail because the setTimeout() function is used to wait for some given amount of time and then runs the given function. You can, however, use the setTimeout() function to build a sleep function using promise if your purpose is to stop the execution for a desired amount of time.

Using the Sleep Function

So, we will make a custom sleep function in which the function will get time in milliseconds as an argument and return a promise. The promise will include a setTimeout() function, which will pass the resolver as a function and time in milliseconds to the setTimeout() function. So, in the end, the sleep function should look like this:

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

And now, wherever you want to use this sleep function, you can easily use it.

Now, we will use this sleep function in a couple of examples to show you how to use it in practice.

First, we will try to console some text and call the sleep function. Since the sleep function is returning a promise, we put a then function after it, in which we will console some text and pass the argument ‘5000’ to the sleep function. After running the program, you will see in the console that it will sleep for 5 seconds.

console.log("Sleep function will wait for 10 seconds and then it will print 'Done'");

sleep(5000).then(()=>{
 console.log("Done");
})

You can witness the delay of 5 seconds to get to the “Done” status in the console.

Suppose we want to perform an animation after every 2 seconds. To do so, we will simply write an asynchronous animation function, in which we will animate something, stop the execution for 2 seconds using sleep, and then repeat this process using a for loop for 10 times.

async function animation(ms){
 console.log("starting...");
 for (let i = 0; i < 10; i++) {
  console.log("animation after 2 seconds...")
  await sleep(ms)
}
console.log("This is the end.");
}

After writing the asynchronous animation function, we can now call the animation function.

animation(2000);

After running the code, you will see in the console that the text “animation after 2 seconds” is repeating every two seconds.

Conclusion

This article showed you how to make a custom sleep function, alongside multiple demonstrations. I hope this article has helped you to better understand the usage of sleep function. You can learn more about Javascript at linuxhint.com.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.