How to create pause or delay in FOR loop?

Question

I am working on a website, where I need to create a pause or delay.
So please tell me How to create pause or delay in for loop in javascript or jQuery

This is a test example

 var s = document.getElementById("div1");
 for (i = 0; i < 10; i++) {
     s.innerHTML = s.innerHTML + i.toString();
     //create a pause of 2 seconds.
  }

Solution 1

I tried all one, but I think this code is better one, it is very simple code.

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);

Solution 2

You can't use a delay in the function, because then the change that you do to the element would not show up until you exit the function.

Use the setTimeout to run pieces of code at a later time:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {

  // create a closure to preserve the value of "i"
  (function(i){

    window.setTimeout(function(){
      s.innerHTML = s.innerHTML + i.toString();
    }, i * 2000);

  }(i));

}

Solution 3

var wonderfulFunction = function(i) {
   var s = document.getElementById("div1"); //you could pass this element as a parameter as well
   i = i || 0;
   if(i < 10) {
      s.innerHTML = s.innerHTML + i.toString();

      i++;
      //create a pause of 2 seconds.
      setTimeout(function() { wonderfulFunction(i) }, 2000);          
   }
}

//first call
wonderfulFunction(); //or wonderfulFunction(0);

You can't pause javascript code, the whole language is made to work with events, the solution I provided let's you execute the function with some delay, but the execution never stops.

Solution 4

if you want to create pause or delay in FOR loop,the only real method is

while (true) {
    if( new Date()-startTime >= 2000) {
        break;
    }
}

the startTime is the time before you run the while but this method will cause the browsers become very slow

View more solutions

Comments

[Pointy]

This will have a big problem because all the timeout funtions share the same "i" value. They'll all pass 11 to "wonderfulFunction".

[Guffa]

@Pointy: Good point. I added a closure to preserve each value.

[nnnnnn]

What's the for loop for? Given it always executes the break wouldn't it be more straightforward to use an if statement? For the same reason, I don't see why you need the inner function...

[nicosantangelo]

@nnnnnn Because I edited the answer without thinking. I took a different approach at first an then I changed it to use the clousure. The way is written the for is useless, edit time :).

[BrokenGlass]

@Guffa: Your brackets are off in your function execution

[Guffa]

@BrokenGlass: No, they are not. The code runs just fine. jsfiddle.net/Guffa/PcuxY

[GardenRouteGold]

Isnt the exactly the same as using setTimeout(function(){ alert('Foo'); },2000);

[1252748]

I'm a bit confused, if the closure "preserves the value of i" why isn't what's calculated by i * 2000 equal to 0 as 0 is the first value of i? Or, if i is being incremented on each iteration, why is the duration between each innerHTML update not increased likewise?

[1252748]

it is even more confusing when I log at the first line of the loop and the first line of the iife: they both log` 0-9` immediately. i know it has been a long time, but can you explain a bit what is going on here? jsbin.com/foqineciva/edit?html,js,output

[Victor Resnov]

I'm sorry, my JS syntax isn't the best. What does the line i = i || 0; mean?

[nicosantangelo]

@VictorResnov it means "assign i to itself if the value of i is truthy, otherwise assign it to 0" developer.mozilla.org/en-US/docs/Glossary/Truthy

[Kevin Robinson]

"It would not make a lot of sense to pause the entire execution anyway" - Says who? It might not be common, but there are legitimate reasons why you might want to do this.