JSFiddle - React, Tailwind, and code Playground

HTML

<label for="ffl_tryout">type something:</label>
<input type="search" name="ffl_tryout" id="ffl_tryout">
<div id="result"> </div>

CSS

div#result {
  box-sizing: border-box;
  min-height: 2em;
  width:100%;
  padding:0.5em;
  background-color: #000;
  color: #0f0;
  margin-top:0.5em;
  line-height:1em;
}

JavaScript

$(document).ready(function() {

	var given_time = 500;

  $(document).frequentFireLimit('input', given_time, 'input#ffl_tryout', function(e) {
    var div_to_show_text = $(document).find('div#result');
    var text_to_show = $(this).val();
    div_to_show_text.empty();
    div_to_show_text.append(text_to_show);
  });
  
});

(function($) {
  $.fn.frequentFireLimit = function (event_type, delay, selector, callback) {

    return this.each(function() {

      var timed_object;
      $(document).on(event_type, selector, function(e) {
        var totok = this;
        clearTimeout(timed_object);
        timed_object = setTimeout(function() { $(totok).frequentFireLimit_handler(callback, e); }, delay);
      });			
    });
  }

  $.fn.frequentFireLimit_handler = function (h, evt) { h.call(this, evt); }
}(jQuery));