Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Delay in a Loop in JavaScript
Loops are used in JavaScript to repeat actions or iterate over a piece of data. With the aid of various techniques, we can add a delay between each iteration of the loop in order to regulate the speed of execution or produce particular temporal effects. This article will teach you how to include a delay in a java script loop and how to use it to delay the execution of a specific piece of code that is running inside one.
Let's look at some of the examples to understand the concept better ?
Example 1 - Using setTimeout()
In the below example ?
create an array with the following elements ? 1, 2, 3, 4, and 5
Process the array pausing one second between each iteration
Using the setTimeout() function the processItem() function iterates through the array, delaying each iteration by 1 s
Filename - index.html
<html> <head> <title>How to add delay in a loop in JavaScript?</title> <script> function delayedLoop() { var items = [1, 2, 3, 4, 5]; var delay = 1000; // 1 second function processItem(index) { // Perform some task with the current item console.log("Processing item:", items[index]); // Check if there are more items to process if (index < items.length - 1) { // Set a timeout to process the next item after the delay setTimeout(function () { processItem(index + 1); }, delay); } } // Start the loop with the first item processItem(0); } delayedLoop(); </script> </head> <body> <h3>Add Delay in Loop using setTimeout()</h3> </body> </html>
Output
The result will like the image below.
Example 2 - Using async/await
In this example, we will ?
Make a function called sleep() that delivers a promise that resolves after a predetermined period of time.
Inside the delayedLoop() function, we will iterate over the array of items. The await sleep(delay) statement is used to introduce the delay, of 1 second, between each iteration.
Filename - index.html
<html> <head> <title>How to add delay in a loop in JavaScript?</title> <script> function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function delayedLoop() { var items = [1, 2, 3, 4, 5]; var delay = 1000; // 1 second for (var i = 0; i < items.length; i++) { // Perform some task with the current item console.log("Processing item:", items[i]); // Wait for the specified delay before processing the next item await sleep(delay); } } delayedLoop(); </script> </head> <body> <h3>Add Delay in Loop using async/await</h3> </body> </html>
Output
The result will like the image below.
Conclusion
Adding a delay in a loop can be useful in various applications, such as creating timed animations, or controlling the execution speed of repetitive tasks. We learned how to add a delay in a loop in javascript using setTimeout() and async/await with a custom sleep() function and saw some examples explaining the same.
5K+ Views
