JSFiddle - React, Tailwind, and code Playground

by thangchung

HTML

<button id='do'> Do long calc!</button>
<div id='status'></div>
<div id='result'></div>

JavaScript

$('#do').on('click', function(){
 
  $('#status').text('calculating....')
 
  // without set timeout, user will never see "calculating...."
  long()
  
  // with set timeout, works as expected
  // setTimeout(long,0)
 
 })
 
 
 
function long(){
  var result = 0
  for (var i = 0; i<1000; i++){
    for (var j = 0; j<1000; j++){
      for (var k = 0; k<1000; k++){
        result = result + i+j+k
      }
    } 
  }
  $('#status').text('calclation done') // has to be in here for this example. or else it will ALWAYS run instantly. This is the same as passing it a callback 
}