How do I add a delay in a JavaScript loop?

javascript

settimeout

async-await

deferred-callbacks

byAnton Shumikhin·Aug 7, 2024

To introduce a delay in a JavaScript loop, use async/await in conjunction with setTimeout. This combination allows the loop to pause execution for a specified duration during each iteration.

Here's the recipe in a nutshell:

async function delayedLoop() {
  for (let i = 0; i < 5; i++) {
    await new Promise(r => setTimeout(r, 1000));
    console.log(i); // Prints a number every second, like clockwork! ⏰
  }
}

delayedLoop();

The magic happens at await new Promise(r => setTimeout(r, 1000));, this line puts the loop on hold, ensuring a 1-second delay before continuing to the next iteration.

Efficiency and Non-blocking: Keeping the Engine Hot, but Not Overheated

JavaScript is known for being efficient and having a non-blocking nature. Adding a delay within a loop needs careful handling not to disrupt the flow. One tool up your sleeve for this is setTimeout().

Inside your loop, setTimeout() can help you generate a systematic delay effect where each iteration has a scheduled execution. Remember to keep an eye on your counter within the setTimeout, to track the sequence and avoid the dreaded endless loop!

Modern JS: When async/await Meets Loop

In the world of ES7, async/await has come to the rescue for handling asynchronous code in JavaScript. With native support in most modern environments including NodeJS, async loops have evolved to offer simplified, more readable methods for introducing delays. But if you are stuck with an older environment, fear not! Tools like BabelJS can transpile your asynchronous code for compatibility.

Placing Intervals: When Timing Becomes an Art

One of the beautiful aspects of using setTimeout() in loops is making each iteration wait patiently for its turn. By multiplying the iteration's index by the delay amount, you create timed intervals resulting in a sequential delay effect.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 3000);
}

This loop will log numbers 0 to 4 every 3 seconds. The i by 3000 millisecond multiplication works like a well-oiled clock. It's about time, get it? 🕓

Encapsulation: Keeping Scope in a Safe Space

Encasing delay function allows us to maintain correct scope. With closures, everything is under control; each iteration accesses only the appropriate variables.

for (let i = 0; i < 5; i++) {
  ((index) => {
    setTimeout(() => console.log(index), index * 1000);
  })(i);
}

Like a responsible parent, this code makes sure that everyone gets their own i to play with. Sharing isn't always fun! 😄

Deferred Callbacks: The Future is Now... Wait! Not now, Soon

Working with setTimeout() reveals a part of JavaScript's charm: the event-driven nature. Deferred callbacks cater to an improved execution flow especially during simultaneous asynchronous operations in a loop.

explain-codes / Javascript / How do I add a delay in a JavaScript loop?

Linked

Wait 5 seconds before executing next line



Any difference between await Promise.all() and multiple await?



How do I make a delay in Java?



How do I measure the execution time of JavaScript code with callbacks?



Javascript closure inside loops – practical use cases

