JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form>
        <input type="text" id="source-text" />
        <label id="update-count">not updated</label>
    </form>
</body>

JavaScript

// maintain out of the scope of the event
var to;
var updateCount = 0;
var timerInProgress = false;

$(document).ready(function () {
    $('#source-text').on('keyup', function () {
        // if it exists, clear it and prevent it from occuring
        //        if (to) clearTimeout(to);

        // reassign it a new timeout that will expire (assuming user doesn't
        // type before it's timed out)
        if (!timerInProgress) {
            timerInProgress = true;
            to = setTimeout(function () {
                timerInProgress = false;
                updatePreview();
            }, 1e3 /* 5 seconds or whatever */ );
        }
    });
    $('#update-count').text("not updated yet");
});

function updatePreview() {
    updateCount++;
    $('#update-count').text("->" + updateCount);
}