JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
<p>No debouncing</p>
<input type="text" id="inputA" />
<div id="outputA" class="output"></div>

<p>clearTimeout/setTimeout</p>
<input type="text" id="inputB" />
<div id="outputB" class="output"></div>

<p>$.debounce()</p>
<input type="text" id="inputC" />
<div id="outputC" class="output"></div>

CSS

.output{
    border: 1px solid black;
    min-height: 50px;
}

JavaScript

$('#inputA').on('input', function(e){
    $('#outputA').text($(this).val());
});

$('#inputB').on('input', function(e){
    var $this = $(this);
    
    clearTimeout($this.data('timeout'));
    
    $this.data('timeout', setTimeout(function(){
        $('#outputB').text($this.val());
    }, 250));
});

$('#inputC').on('input', $.debounce(250, function(e){
    $('#outputC').text($(this).val());
}));