title: Why does the setTimeout 0 not executing at the end of the function
body: <p>I am new to Javascript, and recently got to know the use of setTimeout set to 0 millis. I am trying to implement it but not getting what is expected. As per my knowledge it has to wait until all events finished but it is not behaving expectely. Please tell me what I am missing or where I am wrong.</p>
  
  <h1>index.html</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Test HTML&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>index.js</h1>
  
  <pre><code>(function(){
  
      setTimeout(function () {
          document.write("&lt;p&gt;Event 0 Processed !!&lt;/p&gt;");
      },0);
  
      setTimeout(function () {
          document.write("&lt;p&gt;Event 1 Processed !!&lt;/p&gt;");
      },1000);
  
      setTimeout(function () {
          document.write("&lt;p&gt;Event 2 Processed !!&lt;/p&gt;");
      },2000);
  
      setTimeout(function () {
          document.write("&lt;p&gt;Event 3 Processed !!&lt;/p&gt;");
      },3000);
  
  })();
  </code></pre>
  
  <h1>output</h1>
  
  <pre><code>Event 0 Processed !!
  
  Event 1 Processed !!
  
  Event 2 Processed !!
  
  Event 3 Processed !!
  </code></pre>
  
  <p>I was expecting something like</p>
  
  <pre><code>Event 1 Processed !!
  
  Event 2 Processed !!
  
  Event 3 Processed !!
  
  Event 0 Processed !!
  </code></pre>
  
  <p>Thanks :)</p>