title: Showing an HTML element while in a loop
body: <p>I'm trying to show an HTML element while a loop is running, unfortunately, my approach doesn't seem to work:</p>
  
  <pre class="lang-js prettyprint-override"><code>function mainFunction() {
      $( '#myElement').removeClass( 'hidden');    
      $( 'div.otherElements').each( function() {
          doSomething();
      });
      $( '#myElement').addClass( 'hidden');
  }
  </code></pre>
  
  <p>The <code>removeClass()</code> and <code>addClass()</code> calls work fine on their own, so does the loop. My suspicion is, that the loop starts before the <code>.removeClass()</code> call has finished and the call waits until the end of the loop, so it never really shows on screen, since <code>.removeclass()</code> and <code>.addClass()</code> happen nearly at the same time. If I use <code>console.log()</code> instead of the jquery calls, it shows the same behaviour. When I call <code>mainFunction()</code> the first <code>.console.log()</code> does not show up before the loop has finished.</p>
  
  <p>I already tried to put the loop in another function, but that didn't change anything.</p>