JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

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

JavaScript

var lazyRun = function (funcCall, delay, key) {
  if (typeof funcCall !== "function") return;
  if (typeof key === "undefined") key = "timeoutId";
  funcCall.to = funcCall.to || {};
  if (funcCall.to[key]) clearTimeout(funcCall.to[key]);
  var args = arguments.length > 3 ? Array.prototype.slice.call(arguments, 3) : [];
  funcCall.to[key] = setTimeout(funcCall, delay, ...args);
};




  $(document).ready(function () 
  {
      $('input').on('keyup', function () {
          lazyRun(updatePreview,1e3, this.id, '#update-count-'+ this.id, 
          this.updateCount ? ++this.updateCount : (this.updateCount = 1));
      });
      $('label').text("not updated yet");
  });

  function updatePreview(id, updateCount) {
      $(id).text("->" + updateCount);
  }