JAVASCRIPT

debounce events in JS

const debounce = (callback, time) => {
  let debounceTimer;
  return (e) => {
    window.clearTimeout(debounceTimer);
    debounceTimer = window.setTimeout(callback.bind(null, e), time);
  };
};

function handleInput(e) {
  console.log(e.target.value);
}

document
  .querySelector('#input')
  .addEventListener('input', debounce(handleInput, 1000));

Debounce Event Handler Function

// Get the input box
let input = document.getElementById('my-input');

// Init a timeout variable to be used below
let timeout = null;

// Listen for keystroke events
input.addEventListener('keyup', function (e) {
    // Clear the timeout if it has already been set.
    // This will prevent the previous task from executing
    // if it has been less than <MILLISECONDS>
    clearTimeout(timeout);

    // Make a new timeout set to go off in 1000ms (1 second)
    timeout = setTimeout(function () {
        console.log('Input Value:', textInput.value);
    }, 1000);
});