Скачать или смотреть How to Add a Delay Between Function Calls Inside a Loop in JavaScript

Discover how to effectively add a delay between function calls inside a loop in JavaScript using async/await. Follow our guide for a streamlined approach!
---
This video is based on the question https://stackoverflow.com/q/64720507/ asked by the user 'Zameer Ansari' ( https://stackoverflow.com/u/2404470/ ) and on the answer https://stackoverflow.com/a/64720533/ provided by the user 'Aplet123' ( https://stackoverflow.com/u/5923139/ ) 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: Add delay between function calls inside a loop

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 Add a Delay Between Function Calls Inside a Loop in JavaScript

When working with loops in JavaScript, you may encounter a scenario where you want to call a function with each iteration while introducing a delay between those calls. This can be particularly useful when dealing with API requests, animations, or any other processes that require pacing. In this guide, we will explore the common issue of adding a delay inside a loop and provide a straightforward solution using async/await.

The Problem

Let’s consider the following scenario: you have an array, and you want to iterate through its elements, calling a function for each item. You might attempt to do this using setTimeout, thinking that it will delay each function call correctly. However, you may find that all of your function calls execute at once after the delay, rather than one at a time.

Here's a naive implementation of this idea using setTimeout:

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

When you run this code, you will see all "immediately logging" messages printed right away, followed by all the "after 5 seconds" messages appearing together after the timeout. This happens because the setTimeout function is non-blocking and sets all the timers nearly simultaneously.

Why This Happens

The reason behind this behavior is that the loop iterates rapidly, starting all the timers for setTimeout right away without waiting for one to finish before beginning the next. Each execution of the loop initiates a countdown, but the main loop completes and moves on, ignoring the delay. We need a different approach that allows us to wait for each function call to finish before moving on to the next iteration.

The Solution: Using async/await

To handle the delay correctly and ensure that each function call occurs one after the other, we can leverage JavaScript's async and await features combined with Promises. Here’s how we can implement this:

Step-by-Step Implementation

Create a sleep function: This function will return a Promise that resolves after a specified number of milliseconds.

Use an async function: This allows us to use the await keyword, which pauses execution until the promise is resolved.

Iterate the array with a for...of loop: This will let you work with the elements directly and ensure that you can properly await the sleep function.

Here’s the updated code that implements these steps:

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

Explanation of the Code

sleep Function: The sleep function uses a Promise to delay its resolution, allowing us to create a pause in execution.

async Function: The main function is declared as async, enabling us to use await within it.

for...of Loop: By using for...of, we can iterate over each element of the array and await the sleep function in between iterations.

Conclusion

Using async/await along with a Promise-based sleep function allows you to control the timing of function calls within a loop effectively. This method not only keeps your code clean and readable but also effectively solves the problem of simultaneous calls by ensuring that each operation respects the desired delay.

If you have any further questions or would like to explore additional concepts, feel free to leave a comment below! Thank you for reading, and happy coding!