JSFiddle - React, Tailwind, and code Playground

by Alex Yu

HTML

<div id="test" class="default">TEST DIV</div>
</br>
<i onclick="showInSingleFunc()">CLICK HERE: Try to show with single function call</i></br>
<span>Even though show is being called, the UI will not update until function exits</span>
</br></br>
<i onclick="showFirstFunc();showInSingleFunc()">CLICK HERE: Run with earlier function call</i></br>
<span>Here we are running a prefunction that contains the show command, this will cause the UI to independently update before the long running function ends</span>
</br></br>
<i onclick="hide()">HIDE</i>

CSS

.default{
    display:none;
}

i{
    line-height:15px;
    border: 1px solid #000;
    border-radius:3px;
}

JavaScript

window.showInSingleFunc = function(){
    console.log('singleFunc');
    $('#test').show();
    for(var i=0; i< 10000; i++){
        console.log(i);
    }
    console.log('done');
}

window.showFirstFunc = function(){
    console.log('tttt');
    $('#test').show();
}

window.hide = function(){
    $('#test').hide();
}