title: JS weird behaviour of style.display with loader before intensive code fragment
body: <p>I have a web page where the user can select some options from a menu. Each option takes a few seconds in order to be downloaded, processed and showed. So during this time I try to show a loader gif. But I'm experiencing some weird problems and I'm stucked.</p>
  
  <p>I have created a very simple <a href="https://jsfiddle.net/EMCCi/7aeo0859/" rel="nofollow noreferrer">jsfiddle</a>, erasing everything except the minimum code to reproduce the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#ActnBtn').click(function() {
    document.getElementById("loading").style.display = "block";
    console.log("loader should be showed");
  
    //Intensive code simulation, probably you should adjust the "times" value to the power of your device
    var times = 5000000000;
    for (let i = 0; i &lt; times; i++) {
      var j = (i ^ 2 + 1) / (i - 1) ^ 2;
    }
    console.log("finished")
  
    setTimeout(function() {
      document.getElementById("loading").style.display = "none";
    }, 1000); 
    // 1sec timeout to be able to see the loader
    // document.getElementById("loading").style.display = "none" 
    // Without timeout loader isn't showed because "show" and "hide" happens at the same time
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#loading {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://media.giphy.com/media/lrnlLO9o53qH44g7kC/giphy.gif) center no-repeat #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id=loading&gt;&lt;/div&gt;
  
  &lt;button id="ActnBtn" type="button"&gt;Do some intesive work&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Long history short, the loader is showing after the "intesive code". For me this makes absolutely no sense and I don't know how to continue now. Any help is appreciated. Thank you so much.</p>
  
  <p>Regards,</p>
  
  <p>Héctor</p>
  
  <p>PD: console shows messages like: [Violation] 'click' handler took 4370ms</p>