JSFiddle - React, Tailwind, and code Playground

JavaScript

var timeStart = new Date().getTime();
var aditionalTimeout = 0;
var myTimeout;
setTimer(3000);
block();
block();
block();
var timeEnd = new Date().getTime();
$('body').append('Page was blocked(running importaint code :)) for:<br>' + (timeEnd - timeStart) + 'ms<br>');

function setTimer(milliseconds) {
    //allow additional time to account for the huge lag the page has on load
    recoverLagTime(milliseconds);
    myTimeout = setTimeout(function () {
        if (!aditionalTimeout) {
            test();
        } else {
            if (aditionalTimeout >= milliseconds) {
                test();
            }
            setTimer(aditionalTimeout);
        }
    }, milliseconds);
}

function recoverLagTime(timeoutTime) {
    aditionalTimeout = 0;
    var interval = 50;
    var counter = Math.ceil(timeoutTime / interval);
    var startTime = new Date().getTime();
    var intervalTime;
    var lagInterval = setInterval(adjustTimer, interval);

    function adjustTimer() {
        if (counter <= 0 || aditionalTimeout < 0) {
            clearInterval(lagInterval);
            return;
        }
        counter--;
        intervalTime = new Date().getTime();
        var diff = (intervalTime - startTime);
        if (diff > (interval + 5)) {
            aditionalTimeout += (diff - interval);
        }
        startTime = new Date().getTime();
    }
}

function test() {
    aditionalTimeout = -100;//stop the check function
    var timeAfter100MS = new Date().getTime();
    $('body').append('Timeout Fired at: <br>' + (timeAfter100MS - timeStart) + 'ms<br> (should be ~3000 + ~amount blocked)');
}

function block() {
    for (var i = 0; i < 100000000; i++) {};
}