title: How are the Event Loop, Callback Queue, and Javascript’s single thread connected?
body: <h1>GENERAL GOAL</h1>
  
  <p>I’d like to know how the following pieces of a javascript environment <strong>interconnect as a system</strong>.  </p>
  
  <ul>
  <li>Javascript Engine</li>
  <li>Event Loop</li>
  <li>Event Queue</li>
  </ul>
  
  <p>We can limit this to a <strong>browser environment</strong> since node has been covered in another article (<a href="https://stackoverflow.com/questions/21607692/understanding-the-event-loop">here</a>)</p>
  
  <h1>THINGS I (believe to) UNDERSTAND:</h1>
  
  <ul>
  <li><p>Javascript is single threaded and therefore only has one callstack.</p></li>
  <li><p>Javascript environments provide only a few functions that are truly asynchronous. These may include setTimeout(), setInterval(), and I/O function(s).</p></li>
  <li>A developer cannot create their own asynchronous functions without using one of these.  </li>
  <li>Javascript itself runs synchronously but through it’s async functions can callback the would-be blocking functions once the current callstack is clear.    </li>
  </ul>
  
  <h3>EXAMPLE:</h3>
  
  <pre><code>      console.log(‘Sync code started…’);
  
        setTimeout(function asyncLog() {
             console.log(‘Async function has completed’)
        }, 2000);
  
        console.log(‘Sync code finished…')
  </code></pre>
  
  <h3>EXAMPLE STEPS:</h3>
  
  <p>( Please correct steps if I’m wrong ) </p>
  
  <ol>
  <li>‘Sync code started…’ is logged </li>
  <li>setTimeout is added to stack but immediately returns control </li>
  <li>setTimeout is sent to a different ‘thread’…’worker’? outside of javascript’s single thread to count the 2000 milliseconds </li>
  <li>‘Sync code finished…’ is logged </li>
  <li>After 2000 milliseconds asyncLog() is pushed to the Event Queue </li>
  <li>Because the callstack is clear the Event Loop checks the Event Queue for pending callbacks </li>
  <li>asyncLog() is removed from the queue and pushed to the stack by the Event Loop</li>
  <li>'Async function has completed’ is logged</li>
  <li>callstack is now clear</li>
  </ol>
  
  <h1>QUESTIONS</h1>
  
  <p>These don’t need to be answered one by one if someone could produce an overview of the steps of how and where async functions (such as setTimeout) go from the time they first hit the callstack to when they are called back to the callstack.</p>
  
  <ol>
  <li>On step 3, who produces this new thread? Is it the browser? 
  <ul>
  <li>This new thread is being blocked correct?</li>
  <li>What happens if you have a loop that creates 1000 setTimeouts.  Are 1000 ‘threads’ created?</li>
  <li>Is there a limit to how many threads can be spawned at a time?</li>
  <li>When new thread finishes executing, how does it end up on the queue?</li>
  </ul></li>
  <li>Who supplies the Event Queue?</li>
  <li>Who supplies the Event Loop?
  <ul>
  <li>Does the event loop poll the Event Queue?</li>
  <li>Is the javascript’s thread aware of an event loop?  Or does the Event loop just push things onto the stack?</li>
  <li>How does the Event loop know when the stack is clear?</li>
  </ul></li>
  </ol>