title: Animations under single threaded JavaScript
body: <p>JavaScript is a single threaded language and therefore it executes one command at a time. Asynchronous programming is being implemented via <strong>Web APIs</strong> (<em>DOM for event handling, XMLHttpRequest for AJAX calls, WindowTimers for setTimeout</em>) and the <strong>Event queue</strong> which are managed by the browser. So far, so good! Consider now, the following very simple code:</p>
  
  <pre><code>$('#mybox').hide(17000);
  console.log('Previous command has not yet terminated!');
  ... 
  </code></pre>
  
  <p>Could someone please explain to me the underlying mechanism of the above? Since .hide() has not yet finished (the animation lasts 17 seconds) and JS engine is dealing with it and it is capable of executing one command at a time, in which way does it go to the next line and continues to run the remaining code?</p>
  
  <p>If your answer is that animation <em>creates promises</em>, <strong>the question remains the same</strong>: How JavaScript is dealing with more than one thing at the same time (executing the animation itself, watching the animation queue in case of promises and proceeding with the code that follows...).</p>
  
  <p>Moreover, I cannot explain how promises in jQuery work if they have to <em>watch their parent Deferred object till it is resolved or rejected</em> <strong>that means code execution</strong> and at the same time the remaining code is executed. How is that possible in a single threaded approach? I have no problem to understand AJAX calls for I know they are taken away from JS engine...</p>