title: force DOM redraw with javascript on demand
body: <p>The title of the question expresses what I think is the ultimate question behind my particular case.</p>
  
  <p>My case:
  Inside a click handler, I want to make an image visible (a 'loading' animation) right before a busy function starts. Then I want to make it invisible again after the function has completed.
  Instead of what I expected I realize that the image never becomes visible. I guess that this is due to the browser waiting for the handler to end, before it can do any redrawing (I am sure there are good performance reasons for that).</p>
  
  <p>The code (also in this fiddle: <a href="http://jsfiddle.net/JLmh4/2/" rel="noreferrer">http://jsfiddle.net/JLmh4/2/</a>)</p>
  
  <p>html:</p>
  
  <pre><code>&lt;img id="kitty" src="http://placekitten.com/50/50" style="display:none"&gt;
  &lt;div&gt;&lt;a href="#" id="enlace"&gt;click to see the cat&lt;/a&gt; &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function(){
      $('#enlace').click(function(){
          var kitty = $('#kitty');
          kitty.css('display','block');
  
          // see: http://unixpapa.com/js/sleep.html
          function sleepStupidly(usec)
          {
              var endtime= new Date().getTime() + usec;
              while (new Date().getTime() &lt; endtime)
                  ;
          }
  
          // simulates bussy proccess, calling some function...
  
          sleepStupidly(4000);
  
          // when this triggers the img style do refresh!
          // but not before
          alert('now you do see it');
  
          kitty.css('display','none');
      });
  });
  </code></pre>
  
  <p>I have added the <code>alert</code> call right after the <code>sleepStupidly</code> function to show that in that moment of rest, the browser does redraw, but not before. I innocently expected it to redraw right after setting the 'display' to 'block';</p>
  
  <p>For the record, I have also tried appending html tags, or swapping css classes, instead of the image showing and hiding in this code. Same result.</p>
  
  <p>After all my research I think that what I would need is the <strong>ability to force the browser to redraw</strong> and stop every other thing until then.</p>
  
  <p>Is it possible? Is it possible in a crossbrowser way? Some plugin I wasn't able to find maybe...?</p>
  
  <p>I thought that maybe something like 'jquery css callback' (as in this question: <a href="https://stackoverflow.com/questions/7974761/in-jquery-is-it-possible-to-get-callback-function-after-setting-new-css-rule">In JQuery, Is it possible to get callback function after setting new css rule?</a>) would do the trick ... but that doesn't exist.</p>
  
  <p>I have also tried to separte the showing, function call and hiding in different handlers for the same event ... but nothing. Also adding a <code>setTimeout</code> to delay the execution of the function (as recommended here: <a href="https://stackoverflow.com/questions/8618006/force-dom-refresh-in-javascript">Force DOM refresh in JavaScript</a>).</p>
  
  <p>Thanks and I hope it also helps others.</p>
  
  <p>javier</p>
  
  <p><strong>EDIT (after setting my preferred answer):</strong></p>
  
  <p>Just to further explain why I selected the window.setTimeout strategy.
  In my real use case I have realized that in order to give the browser time enough to redraw the page, I had to give it about 1000 milliseconds (much more than the 50 for the fiddle example). This I believe is due to a deeper DOM tree (in fact, unnecessarily deep).
  The setTimeout let approach lets you do that.</p>