title: jQuery hide() and show() not immediately run when reversed later in the function
body: <p>I'm using jQuery's <code>.hide()</code> and <code>.show()</code> functions to show a loading message while a potentially long synchronous webservice call executes.</p>
  
  <p>When clicking the button in the below snippet, I would expect the text "Some data" to be immediately replaced with "Loading..." and then go back to "Some other data" after 5 seconds.</p>
  
  <p>As you can see, that is not what happens:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function run_test() {
      $('#test1').hide();
      $('#test2').show();
      
      long_synchronous_function_call()
      
      $('#test2').hide();
      $('#test1').show();
  }
  
  function long_synchronous_function_call() {
      $('#test1').html('&lt;p&gt;Some other data&lt;/p&gt;');
      var date = new Date();
   while ((new Date()) - date &lt;= 5000) {}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="test1"&gt;
      &lt;p&gt;Some data&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="test2" style="display:none"&gt;
      &lt;p&gt;Loading...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button onclick="run_test()"&gt;Call a long synchronous function!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In fact, the "Loading" element never appears, and "Some other data" is simply replaced without our hypothetical user getting any feedback during the long wait.</p>
  
  <p>What can I do to ensure that jQuery hides and shows my elements <em>now</em>, not once all my functions have finished executing?</p>