Performance - Debounce

performance-debounce.js

// Make sure we have a input field with id "inputData" in our DOM.

const inputData = document.getElementById("inputData");

const getDataFromServer = (name) => {
  console.log(`${name} :: getting Data from Server...........`);
};

const debounce = (callback, delay) => {
  delay = delay || 2000;
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
};

// Make sure you don't use debounce's direct call in the event listner
// Otherwise it will recreate the timeout eachtime and won't work as expected
const debouncedFunc = debounce(getDataFromServer);

inputData.addEventListener("input", (e) => {
  const searchValue = e.target.value;
  debouncedFunc(searchValue);
});