SO Answer / how browser execute javascript & render asynchronous

Link to question in result screen

by KooiInc MeHere

HTML

<script src="http://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<div class="solink" data-linkid="26380086"></div>
<div id = "xrunner" class="row btn_area">
    <button class="btn btn-info" data-run="updateSync">Run Sync</button>
    <button class="btn btn-info" data-run="updateAsync">Run Async</button>
    <span class="label label-info pull-right" style="display:block;" id="output"></span>
</div>

CSS

#warning {
    color: red;
    font-weight: bold;
}

.hidden {
    visibility: collapse;
}

JavaScript

(function (d, w, undefined) {
    d.querySelector('#xrunner').addEventListener('click', dorun);
    var print = Helpers.printDirect
       ,clrscr = Helpers.logClear
    
    function dorun(e) {
     var origin = e.target || e.srcElement
        ,method = origin.getAttribute('data-run');
        
     if (method) {
       ({ updateSync: updateSync, 
          updateAsync: updateAsync })[method]();
     }
        
     function updateSync() {
       clrscr();  
       print('<b>Queuing log</b>:');
       for (var i = 0; i < 20; i+=1) {
         var fn = function() { print('<code>d.getElementById(\'output\').innerHTML = i</code>',
                                     ' queued');
                               d.getElementById('output').innerHTML = i; };
         setTimeout(fn,20);
         print('<code>setTimeout</code> queued');
       }
     }
        
     function updateAsync() {
       var i = 0;
       clrscr();
       print('<b>Queuing log</b>:');
       function updateLater() {
           d.getElementById('output').innerHTML = (i++);
           print('<code>d.getElementById(\'output\').innerHTML = i</code>',' queued');
           if (i < 100) {
               setTimeout(updateLater, 20);
               print('<code>setTimeout</code> queued');
           }
       }
       updateLater();   
     }
    }
    
}(document, window))