title: Understanding the Event Loop
body: <p>I am thinking about it and this is what I came up with:</p>
  <p>Let's see this code below:</p>
  <pre class="lang-js prettyprint-override"><code>console.clear();
  console.log(&quot;a&quot;);
  setTimeout(function(){console.log(&quot;b&quot;);},1000);
  console.log(&quot;c&quot;);
  setTimeout(function(){console.log(&quot;d&quot;);},0);
  </code></pre>
  <p>A request comes in, and JS engine starts executing the code above step by step. The first two calls are sync calls. But when it comes to <code>setTimeout</code> method, it becomes an async execution. But JS immediately returns from it and continue executing, which is called <code>Non-Blocking</code> or <code>Async</code>. And it continues working on other etc.</p>
  <p>The results of this execution is the following:</p>
  <blockquote>
  <p>a c d b</p>
  </blockquote>
  <p>So basically the second <code>setTimeout</code> got finished first and its callback function gets executed earlier than the first one and that makes sense.</p>
  <p>We are talking about single-threaded application here. JS Engine keeps executing this and unless it finishes the first request, it won't go to second one. But the good thing is that it won't wait for blocking operations like <code>setTimeout</code> to resolve so it will be faster because it accepts the new incoming requests.</p>
  <p>But my questions arise around the following items:</p>
  <p><strong>#1:</strong> If we are talking about a single-threaded application, then what mechanism processes <code>setTimeouts</code> while the JS engine accepts more requests and executes them? How does the single thread continue working on other requests? What works on <code>setTimeout</code> while other requests keep coming in and get executed.</p>
  <p><strong>#2:</strong> If these <code>setTimeout</code> functions get executed behind the scenes while more requests are coming in and being executed, what carries out the async executions behind the scenes? What is this thing that we talk about called the <code>EventLoop</code>?</p>
  <p><strong>#3:</strong> But shouldn't the whole method be put in the <code>EventLoop</code> so that the whole thing gets executed and the callback method gets called? This is what I understand when talking about callback functions:</p>
  <pre class="lang-js prettyprint-override"><code>function downloadFile(filePath, callback)
  {
     blah.downloadFile(filePath);
     callback();
  }
  </code></pre>
  <p>But in this case, how does the JS Engine know if it is an async function so that it can put the callback in the <code>EventLoop</code>? Perhaps something like the <code>async</code> keyword in C# or some sort of an attribute which indicates the method JS Engine will take on is an async method and should be treated accordingly.</p>
  <p><strong>#4:</strong> But an <a href="http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027" rel="noreferrer">article</a> says quite contrary to what I was guessing on how things might be working:</p>
  <blockquote>
  <p>The Event Loop is a queue of callback functions. When an async
  function executes, the callback function is pushed into the queue. The
  JavaScript engine doesn't start processing the event loop until the
  code after an async function has executed.</p>
  </blockquote>
  <p><strong>#5:</strong> And there is this image here which might be helpful but the first explanation in the image is saying exactly the same thing mentioned in question number 4:</p>
  <p><img src="https://i.stack.imgur.com/zYgcr.png" alt="enter image description here" /></p>
  <p>So my question here is to get some clarifications about the items listed above?</p>