flow of execution of javascript(synchronous or asynchronous)

Question

Can someone explain me the behaviour of following code and javascript

for(var i = 0; i < 5; i++)
{
    setTimeout(function(){
    document.write('Iteration ' + i + ' <br>');
    },1000);
}

document.write('DONE!');

why does it print 'DONE!' first? Shouldn't it print all values of the loop and then print 'DONE!'?

Answer 1

why does it print 'DONE!' first? Shouldn't it print all values of the loop and then print 'DONE!'?

No, you've explicitly told it not to; instead, you've just created five functions and called setTimeout five times to give them to the browser to call later.

This code:

setTimeout(function(){
document.write('Iteration ' + i + ' <br>');
},1000);

calls the function setTimeout , passing in the function you see. That function is not called at that time. It's just created. setTimeout will call it later , as is its job. (And when it does, it will blow away the document, because calling document.write after the main parsing of the page is complete implicitly does document.open , which wipes out the previous document.)

So here's what happens with that code:

1. The variable i is created.
2. It's set to 0 .
3. A function is created.
4. setTimeout is called with that function object's reference being passed in, along with the value 1000 .
5. i is incremented.
6. Steps 2 through 5 repeat for values 1 , 2 , 3 , and 4 of i .
7. document.write is called with the value 'DONE!'
8. About a second later, the browser calls the first function created in the loop.
9. That function calls document.write , which implicitly does a document.open , which blows away the existing document and replaces it with Iteration 5 <br> (yes, really 5).
10. The second function created in the loop is run, outputting the message again.
11. The remaining three functions are called, adding the message another three times.

The reason we see Iteration 5 five times instead of Iteration 0 , then Iteration 1 , etc., is that the functions have an enduring reference to the variable i , not to its value when they were created, so they all read its value later, as of when they run.

Answer 2

Javascript in normal is Synchronous Exectue line by line, but with code change you can act sometime as Asynchronous, but it's not actually going to execute on a separate thread.

Ok, what if you want to print Done just after the Document.write is done

length = 0;
for(var i = 0; i < 5; i++)
{
  setTimeout(function(index){
  console.log('Iteration ' + index + ' <br>');
  length++;
  callback();
  }(i),1000);
}

function callback(){
 if(length == 5)
   console.log('DONE!');
}

What we did here is we increment the counter and try to call the callback after each time its incremented and when counter reach 5 that mean all the 5 functions is called and then we are able to print Done .

And as a side and important note, you was trying to print 0, 1, 2, 3, 4 but actually when you run your code it will give you 5, 5, 5, ,5, 5 because you write i and i at the point when you print is reached 5 and that's why it go out of the for loop, but you notice the code i added, i pass i as an argument to the function so that it will save the value for us and when time to execute the funtion it will write 0, 1, 2, 3, 4