How do you delay a loop in javascript?
I recently ran into the problem of having to loop over an array, but with a delay between iterations. This functionality isn’t built in to JavaScript and I couldn’t find any libraries that provided it out-of-the-box. So I decided to code my own solution. Keep reading and we’ll build it together. Show I want to loop through an array of strings and display one string at a time on the page. We’ll start with a basic HTML template.
First, let’s create a function which displays text in this
Text can be displayed on the page by calling Next, let’s define an array of strings.
To loop over this array and display each name, we can use Array.prototype.forEach().
We can loop over the array and call
The problem is that the browser loops over the array so quickly, that only our last element is shown. We could try slowing it down by adding a simple setTimeout().
But all that happens here is that nothing is displayed for 1000 milliseconds (1 second), then we see the last name again! But why?
What we really need is to set a 0 second timeout on the first item, a 1 second timeout on the second item, a 2 second timeout on the third item, and so on. To do this, re-write the loop like so.
You can see that instead of setting a static 1000 millisecond delay for all iterations like before, we now multiply the iteration index by 1000 milliseconds. And it works! We’ve reached our goal so we could stop here. But we’re really smart so let’s make this more re-usable and functional by moving the function into a delayed-loop factory function. Start with a blank function that accepts two arguments:
This function will return a function itself.
Copy the existing function we just created earlier into this function as the return value.
Instead of the hard-coded
Also instead of naming our passed-in argument
Finally, instead of hard-coding the value
Our delayed loop function is done. We can pass it to any
All of the JavaScript together, looks like this:
The end result is the same as before. Now you can use You can see the all the code and a demo on CodePen below. How do I add a delay in a JavaScript loop?To create pause or delay in a JavaScript for loop, we should use await with a for-of loop. to define the wait function that returns a promise that calls setTimeout with resolve to resolve the promise in ms milliseconds. Then we define the loop function that runs a for-of loop to loop through an array.
How do you create a delay in a loop?In the code given above you have to do 2000 * i at line 8 because setTimeout method inside the loop doesn't makes the loop pause but actually adds a delay to each iteration. Remember that all the iteration start their time together.
How do you delay 1 second in JavaScript?To delay a function execution in JavaScript by 1 second, wrap a promise execution inside a function and wrap the Promise's resolve() in a setTimeout() as shown below. setTimeout() accepts time in milliseconds, so setTimeout(fn, 1000) tells JavaScript to call fn after 1 second.
What is delay () in JavaScript?Conclusion. setTimeout() is a method that will execute a piece of code after the timer has finished running. let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...); The delay is set in milliseconds and 1,000 milliseconds equals 1 second.
|