JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<table border=1>
    <tr><td><button id='do'>Do long calc - bad status!</button></td>
        <td><div id='status'>Not Calculating yet.</div></td>
    </tr>
    <tr><td><button id='do_ok'>Do long calc - good status!</button></td>
        <td><div id='status_ok'>Not Calculating yet.</div></td>
    </tr>
     <tr><td><button id='do_ok_1'>Do long calc - good status!</button></td>
        <td><div id='status_ok_1'>Not Calculating yet.</div></td>
    </tr>
</table>

JavaScript

function long_running(status_div) {

    var result = 0;
    // Use 1000/700/300 limits in Chrome, 
    //    300/100/100 in IE8, 1000/500/200 in FF
    for (var i = 0; i < 1000; i++) {
        for (var j = 0; j < 700; j++) {
            for (var k = 0; k < 300; k++) {
                result = result + i + j + k;
            }
        }
    }
    $(status_div).text('calclation done');
}
// Assign events to buttons
$('#do').on('click', function () {
    $('#status').text('calculating....');
    long_running('#status');
});
$('#do_ok').on('click', function () {
    $('#status_ok').text('calculating....');
    // This works on IE8. Works in Chrome
    // Does NOT work in FireFox 25 with timeout =0 or =1
    // DOES work in FF if you change timeout from 0 to 500
    window.setTimeout(function (){ long_running('#status_ok') }, 0);
});

$('#do_ok_1').on('click', function () {
    $('#status_ok_1').text('calculating....');
    // This works on IE8. Works in Chrome
    // Does NOT work in FireFox 25 with timeout =0 or =1
    // DOES work in FF if you change timeout from 0 to 500
    nextTick(function (){ long_running('#status_ok_1') });
});

function nextTick(fn = () => {}) {
  var id = window.requestAnimationFrame(function() {
  	Promise.resolve().then(fn).then(
    	() => window.cancelAnimationFrame(id)
    );
  });
};