JSFiddle - React, Tailwind, and code Playground

by natedavisolds

HTML

<p>This will show if the document has focus every three seconds</p>
<button id="go">Go</button>
<button id="stop">Stop</button>

<ul id="active_log">
</ul>

CSS

#stop { display: none; }

JavaScript

var timeout = null;

var checkActive = function() {
    var isActive = window.document.hasFocus(),
        $activity = $("<li />").text(isActive.toString());
    
    $('#active_log').prepend($activity)
        .find('li:nth-child(n+6)')
            .fadeOut(function() { $(this).remove(); });
    
    timeout = setTimeout(checkActive, 3000);
}
    
$('#go').click(function() {
    $(this).hide().siblings('button').show();
    checkActive();
});
    
$('#stop').click(function() {
    $(this).hide().siblings('button').show();
    clearTimeout(timeout);
    timeout = null;
});