Скачать или смотреть How to Implement a Sleep or Full Pause in JavaScript

Discover the best ways to achieve a `sleep` or `pause` functionality in JavaScript, similar to Python's time.sleep() method. Learn how to use async functions and Promises for more effective code execution.
---
This video is based on the question https://stackoverflow.com/q/67432953/ asked by the user 'Wilfredo Mitra' ( https://stackoverflow.com/u/11544364/ ) and on the answer https://stackoverflow.com/a/67433709/ provided by the user 'era-net' ( https://stackoverflow.com/u/11800867/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to make a sleep or full pause in javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Implement a Sleep or Full Pause in JavaScript

If you've ever transitioned from Python to JavaScript, you may have noticed that certain patterns, like creating pauses in execution, don’t translate directly. For instance, in Python, you can use time.sleep() to halt execution for a specified amount of time. However, JavaScript operates differently, especially under the asynchronous nature of its execution model.

In this guide, we will explore how you can effectively create a sleep or pause functionality in JavaScript. By the end of this article, you will know how to delay your code’s execution similar to what you might be used to in Python.

The Problem

Consider the following JavaScript code snippet:

[[See Video to Reveal this Text or Code Snippet]]

In this example, you may expect "Hello" to print first because of the delay. However, the output will be:

[[See Video to Reveal this Text or Code Snippet]]

This occurs because JavaScript's setTimeout is non-blocking. When setTimeout is called, it starts the timer in the background and moves on to the next line of code immediately.

The Solution

Using Promises and Async/Await

To replicate the functionality of time.sleep() in JavaScript, we can use Promises along with the async and await keywords.

Step 1: Creating the Sleep Function

We'll start by creating a sleep function that returns a Promise. This function will resolve after a specified delay.

[[See Video to Reveal this Text or Code Snippet]]

Function Explanation:

The sleep function takes one parameter, ms, which represents the duration of the pause in milliseconds.

It uses setTimeout to create a delay and resolves the promise once the time has elapsed.

Step 2: Using Async/Await

The beauty of using async functions is that they allow us to use await, which effectively pauses the execution of the function until the Promise resolves.

Here's how you can implement it:

[[See Video to Reveal this Text or Code Snippet]]

Function Breakdown:

The wait function is declared with the async keyword.

Inside wait, we first output "sleeping...".

We then call await sleep(2000), which pauses execution for 2 seconds before continuing to the next line.

Finally, "done" is printed to the console.

Outputs

When you run this code, it will produce the following output:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With the introduction of the sleep function in combination with async/await, you can effectively pause your JavaScript code just like you would in Python with time.sleep(). This approach improves the readability of your code and makes it easier to manage asynchronous behavior in JavaScript.

Now you have the tools to implement pauses in your JavaScript projects seamlessly! Happy coding!