title: DOM refresh on long running function
body: <p>I have a button which runs a long running function when it's clicked. Now, while the function is running, I want to change the button text, but I'm having problems in some browsers like Firefox, IE.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;button id="mybutt" class="buttonEnabled" onclick="longrunningfunction();"&gt;&lt;span id="myspan"&gt;do some work&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>function longrunningfunction() {
      document.getElementById("myspan").innerHTML = "doing some work";
      document.getElementById("mybutt").disabled = true;
      document.getElementById("mybutt").className = "buttonDisabled";
  
      //long running task here
  
      document.getElementById("myspan").innerHTML = "done";
  }
  </code></pre>
  
  <p>Now this has problems in firefox and IE, ( in chrome it works ok )</p>
  
  <p>So I thought to put it into a settimeout:</p>
  
  <pre><code>function longrunningfunction() {
      document.getElementById("myspan").innerHTML = "doing some work";
      document.getElementById("mybutt").disabled = true;
      document.getElementById("mybutt").className = "buttonDisabled";
  
      setTimeout(function() {
          //long running task here
          document.getElementById("myspan").innerHTML = "done";
      }, 0);
  }
  </code></pre>
  
  <p>but this doesn't work either for firefox! the button gets disabled, changes colour ( due to the application of the new css ) but the text does not change.</p>
  
  <p>I have to set the time to 50ms instead of just 0ms, in order to make it work ( change the button text ). Now I find this stupid at least. I can understand if it would work with just a 0ms delay, but what would happen in a slower computer? maybe firefox would need 100ms there in the settimeout? it sounds rather stupid. I tried many times, 1ms, 10ms, 20ms...no it won't refresh it. only with 50ms.</p>
  
  <p>So I followed the advice in this topic:</p>
  
  <p><a href="https://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation">Forcing a DOM refresh in Internet explorer after javascript dom manipulation</a></p>
  
  <p>so I tried:</p>
  
  <pre><code>function longrunningfunction() {
      document.getElementById("myspan").innerHTML = "doing some work";
      var a = document.getElementById("mybutt").offsetTop; //force refresh
  
      //long running task here
  
      document.getElementById("myspan").innerHTML = "done";
  }
  </code></pre>
  
  <p>but it doesn't work ( FIREFOX 21). Then i tried:</p>
  
  <pre><code>function longrunningfunction() {
      document.getElementById("myspan").innerHTML = "doing some work";
      document.getElementById("mybutt").disabled = true;
      document.getElementById("mybutt").className = "buttonDisabled";
      var a = document.getElementById("mybutt").offsetTop; //force refresh
      var b = document.getElementById("myspan").offsetTop; //force refresh
      var c = document.getElementById("mybutt").clientHeight; //force refresh
      var d = document.getElementById("myspan").clientHeight; //force refresh
  
      setTimeout(function() {
          //long running task here
          document.getElementById("myspan").innerHTML = "done";
      }, 0);
  }
  </code></pre>
  
  <p>I even tried clientHeight instead of offsetTop but nothing. the DOM does not get refreshed. </p>
  
  <p>Can someone offer a reliable solution preferrably non-hacky ?</p>
  
  <p>thanks in advance!</p>
  
  <p>as suggested here i also tried</p>
  
  <pre><code>$('#parentOfElementToBeRedrawn').hide().show();
  </code></pre>
  
  <p>to no avail</p>
  
  <p><a href="https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac">Force DOM redraw/refresh on Chrome/Mac</a></p>
  
  <p><strong>TL;DR:</strong></p>
  
  <p>looking for a RELIABLE cross-browser method to have a forced DOM refresh WITHOUT the use of setTimeout (preferred solution due to different time intervals needed depending on the type of long running code, browser, computer speed and setTimeout requires anywhere from 50 to 100ms depending on situation)</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/WsmUh/5/" rel="noreferrer">http://jsfiddle.net/WsmUh/5/</a></p>