JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">do some work</button>

JavaScript

$("#btn").on("click", dowork);

function doHeavyWork(start) {
    var total = 1000000000;
    var fragment = 1000000;
    var end = start + fragment;
    
    // Do heavy work
    for (var i = start; i < end; i++) {
        //
    }
    
    if (end == total) {
        // If we reached the end, stop and change status
        document.getElementById("btn").innerHTML = "done!";
    } else {
        // Otherwise, process next fragment
        setTimeout(function() {
            doHeavyWork(end);
        }, 0);
    }            
}

function dowork() {
    // Set "working" status
    document.getElementById("btn").innerHTML = "working";
    
    // Start heavy process
    doHeavyWork(0);
}