Performance - Throttling

performance-throttling.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 throttle = (callback, delay) => {
  delay = delay || 2000;
  let isEnabled = true;
  return (...args) => {
    if (isEnabled) {
      isEnabled = false;
      setTimeout(() => {
        callback(...args);
        isEnabled = true;
      }, delay);
    }
  };
};

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

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