How to add delay in a loop in JavaScript?

Loops are used in JavaScript to repeat actions or iterate over data. Adding delays between iterations helps control execution speed, create animations, or prevent overwhelming the browser. This article demonstrates how to add delays in JavaScript loops using different techniques.

Let's explore practical examples to understand the concept better.

Using setTimeout() with Recursive Functions

The setTimeout() approach uses recursion to process each array element with a delay:

function delayedLoop() {
   var items = [1, 2, 3, 4, 5];
   var delay = 1000; // 1 second

   function processItem(index) {
      // Perform task with current item
      console.log("Processing item:", items[index]);

      // Check if more items exist
      if (index < items.length - 1) {
         // Process next item after delay
         setTimeout(function () {
            processItem(index + 1);
         }, delay);
      }
   }

   // Start with first item
   processItem(0);
}

delayedLoop();

Processing item: 1
(waits 1 second)
Processing item: 2
(waits 1 second)
Processing item: 3
(waits 1 second)
Processing item: 4
(waits 1 second)
Processing item: 5

Using async/await with Promise-based Delay

Modern JavaScript offers a cleaner approach using async/await with a Promise-based sleep function:

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++) {
      // Process current item
      console.log("Processing item:", items[i]);

      // Wait before next iteration
      await sleep(delay);
   }
}

delayedLoop();

Processing item: 1
(waits 1 second)
Processing item: 2
(waits 1 second)
Processing item: 3
(waits 1 second)
Processing item: 4
(waits 1 second)
Processing item: 5

Using setInterval() for Fixed Intervals

For consistent timing, setInterval() can process items at regular intervals:

function delayedLoop() {
   var items = [1, 2, 3, 4, 5];
   var index = 0;
   var delay = 1000; // 1 second

   var interval = setInterval(function() {
      console.log("Processing item:", items[index]);
      index++;

      // Stop when all items processed
      if (index >= items.length) {
         clearInterval(interval);
      }
   }, delay);
}

delayedLoop();

Processing item: 1
(waits 1 second)
Processing item: 2
(waits 1 second)
Processing item: 3
(waits 1 second)
Processing item: 4
(waits 1 second)
Processing item: 5

Comparison of Methods

Common Use Cases

• Animations: Creating smooth visual transitions

• API Calls: Preventing rate limiting by spacing requests

• User Experience: Gradual content loading for better perception

• Data Processing: Avoiding browser freezing with large datasets

Conclusion

Adding delays in loops is essential for controlling execution timing and improving user experience. The async/await approach is recommended for modern applications due to its readability and error handling capabilities.