JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div id="out"></div>
<textarea id="text"></textarea>
<br />
<textarea id="input-log" readonly></textarea>

CSS

#input-log {
    width: 512px;
    height: 256px;
}

JavaScript

var i = 0,
    out$ = $('#out'),
    inputLog$ = $('#input-log');

function updateOutput() {
    // doing whatever you want; 
    // I'll update the content of div#out for example.
    out$.html('10 seconds passed: ' + i++ + ' times.');
}

updateOutput();

// >  one that fires every 10 seconds:
var interval = 10000,
    intervalID = window.setInterval(updateOutput, interval),
    keyTimer;

$('#text').on("change keyup input", function() {
        if (keyTimer) {
                window.clearTimeout(keyTimer);
        }
        var time = new Date();
        keyTimer = window.setTimeout(function() {
                keyTimer = null;
            
            inputLog$[0].value += "Event fired at " + time + "\n";

        }, 3000);
});