JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="field"></textarea><br />
<span id="status"></span>

JavaScript

var Handler = {
    
    /**
     * Time in ms from the last event
     */
    lastEvent: 0,
    
    /**
     * The last keystroke must be at least this amount of ms ago
     * to allow our ajax call to run
     */
    cooldownPeriod: 200,
    
    /**
     * This is our timer
     */
    timer: null,
    
    /**
     * This should run when the keyup event is triggered
     */
    up: function( event )
    {
        var d = new Date(),
            now = d.getTime();
        
        if( ( now - Handler.lastEvent ) < Handler.cooldownPeriod ) {
            // We do not want to run the Ajax call
            // We (re)set our timer
            Handler.setTimer();
        } else {
            // We do not care about our timer and just do the Ajax call
            Handler.resetTimer();
            Handler.ajaxCall();
        }
        
        Handler.lastEvent = now;
    },
    
    /**
     * Function for setting our timer
     */
    setTimer: function()
    {
        this.resetTimer();
        this.timer = setTimeout( function(){ Handler.ajaxCall() }, this.cooldownPeriod );
    },
    
    /**
     * Function for resetting our timer
     */
    resetTimer: function()
    {
        clearTimeout( this.timer );
    },
    
    /**
     * The ajax call
     */
    ajaxCall: function()
    {
        var d = new Date(),
            now = d.getTime();
        
        // do ajax call
        jQuery( '#status' )
                .text( 'Ajax call at ' + now );
    }
    
};

jQuery( function(){
    
    var field = jQuery( '#field' );

    field.on( 'keyup', Handler.up );
    
});