debounce

debounce

by Yury

HTML

<p>
debounce
</p>

CSS

* {
  background: #1e1e1e;
  font-family: sans-serif;
  color: #c0c0c0;
  text-align: center;
}

JavaScript

export const debounce = (func, ms = 500) => {
  let timeout;
  return function () {
    const fnCall = () => {
      func.apply(this, arguments);
    };
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(fnCall, ms);
  };
};


  const searchInput = document.querySelector('input[name="search"]');

  const handleInputKeyUp = debounce((e) => {
    console.log('handleInputKeyUp: E: ', e.target.value.trim().toLowerCase()); // prettier-ignore
  }, 700);

  searchInput.addEventListener('keyup', handleInputKeyUp);