title: How does single threading block DOM manipulation in JavaScript?
body: <p>I hope my title is correct. I was at an interview today and was stumped by a question dealing with the event loop/ single threading. Here is the code:</p>
  
  <pre><code>function longCB(){
      for (var i = 0; i &lt;= 9999; i++){
      console.log(i);
    }
    $('#status').text('hello')
  }
  
  $('#status').text('hi')
  longCB();
  </code></pre>
  
  <p>The question was why does the DOM never display 'hi' on the #status div?
  Being completely stumped the interviewer explained it was because of single threading in javascript and explained that just by adding a setTimeout to longCB() even if it was set to 0 would make it work. After reviewing the event loop/ event que and call stacks I am still completely stumped why this doesn't work? Shouldn't the line</p>
  
  <pre><code>$('#status').text('hi')
  </code></pre>
  
  <p>be done before even calling longCB()? What am I missing? Thank you in advanced.</p>