How do I add a delay in a JavaScript loop

0 votes

I would like to add a delay/sleep inside a while loop:

I tried it like this:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Only the first scenario is true: after showing alert('hi'), it will be waiting for 3 seconds then alert('hello') will be displayed but then alert('hello') will be repeatedly constantly.

What I would like is that after alert('hello') is shown 3 seconds after alert('hi') then it needs to wait for 3 seconds for the second time alert('hello') and so on. How to do it?

Sep 21, 2020 in Java-Script by kartik
• 37,520 points
7,763 views

1 answer to this question.

0 votes

Hello @kartik,

The setTimeout() function is non-blocking and will return immediately. Therefore your loop will iterate very quickly and it will initiate 3-second timeout triggers one after the other in quick succession. That is why your first alerts pops up after 3 seconds, and all the rest follow in succession without any delay.

You may want to use something like this instead:

var i = 1;                  //  set your counter to 1

function myLoop() {         //  create a loop function
  setTimeout(function() {   //  call a 3s setTimeout when the loop is called
    console.log('hello');   //  your code here
    i++;                    //  increment the counter
    if (i < 10) {           //  if the counter < 10, call the loop function
      myLoop();             //  ..  again which will trigger another 
    }                       //  ..  setTimeout()
  }, 3000)
}

myLoop();                   //  start the loop

Hope it work!!
Thank you!

answered Sep 21, 2020 by Niroj
• 82,840 points

Related Questions In Java-Script

0 votes
1 answer

How do I break a string across more than one line of code in JavaScript?

Hello @kartik, In your example, you can break ...READ MORE

answered Oct 8, 2020 in Java-Script by Niroj
• 82,840 points
666 views
0 votes
1 answer

How do I search for a key of object in javascript?

Use hasOwnProperty(key) for (let i = 0; i ...READ MORE

answered Oct 14, 2020 in Java-Script by Niroj
• 82,840 points
2,496 views
0 votes
0 answers

How do I format a date in JavaScript?

May 7, 2022 in Java-Script by narikkadan
• 63,600 points
464 views
0 votes
0 answers

How do I check if an array includes a value in JavaScript?

What is the quickest and most effective method to determine whether a JavaScript array has a value? The only method I am aware of is as follows: function contains(a, obj) { ...READ MORE

Sep 23, 2022 in Java-Script by Abhinaya
• 1,160 points
746 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,840 points
23,012 views
0 votes
1 answer

What is type casting and type juggling in php?

Hey, The way by which PHP can assign ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,840 points
7,184 views
0 votes
2 answers

How can we create a session in PHP?

Hello, niroj. Here is my idea session_start(); $_SESSION['USERNAME'] ...READ MORE

answered Dec 7, 2020 in PHP by Famous
• 140 points
1,180 views
0 votes
1 answer

What is the use of $_REQUEST variable in php?

Hii @kartik, The $_REQUEST variable is used to read the ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,840 points
3,282 views
0 votes
1 answer

How do I include a JavaScript file in another JavaScript file?

Hello @kartik, It is possible to dynamically generate ...READ MORE

answered Jul 27, 2020 in Java-Script by Niroj
• 82,840 points
834 views
0 votes
1 answer

How do I declare a namespace in JavaScript?

Hello @kartik, Try this: var yourNamespace = { ...READ MORE

answered Sep 21, 2020 in Java-Script by Niroj
• 82,840 points
581 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP