JSFiddle - React, Tailwind, and code Playground

HTML

<input id='text'/>
<div id='test'>changed #<span id='count'>0</span></div>
<div id='flush'>Click me</div>

JavaScript

;(function(g){
        var delayRuns = {};
        var allFuncs = {};
        g.delayRun = function(id, func, delay){
            if(delay == undefined) delay = 200;
            if(delayRuns[id] != null){
                clearTimeout(delayRuns[id]);
                delete delayRuns[id];
                delete allFuncs[id];
            }
            allFuncs[id] = func;
            delayRuns[id] = setTimeout(function(){
                func();
                delete allFuncs[id];
                delete delayRuns[id];
            }, delay);
        };
        g.delayRun.flush = function(){
            for(var i in delayRuns){
                if(delayRuns.hasOwnProperty(i)){
                    clearTimeout(delayRuns[i]);
                    allFuncs[i]();
                    delete delayRuns[i];
                    delete allFuncs[i];
                }
            }
        };
    })(window);
    
    var i = 0;
    $('#text').bind('check_changed', function(){
        var t = $(this);
        delayRun('my_text', function(){
            var pv = t.data('prev_val');
            if(pv == undefined || pv != t.val()){
                $('#count').html(++i);
                t.data('prev_val', t.val());
            }
        }, 1000);
    })
    .keydown(function(){$(this).trigger('check_changed')})
    .bind('paste', function(){$(this).trigger('check_changed')});
    
    $('#flush').click(function(){ delayRun.flush(); });