throttle function broke my input live search

Question

I am trying to throttle my html on input when user enters some words into search field there must be a redrawing of the block. When I implemented throttle function into my code, the live search stopped working, now the card redrawing does not happen

    searchInput.addEventListener('input', (event: Event) => {
  searchTerm = (event.target as HTMLTextAreaElement).value.toLowerCase();
  throttle(() => {
    showList();
  }, 100);
});

function throttle(func: Function, ms: number) {
  let isThrottled: boolean = false;
  let savedArgs: any, savedThis: any;

  function wrapper(this: any) {
    if (isThrottled) {
      savedArgs = arguments;
      savedThis = this;
      return;
    }
    func.apply(this, arguments);
    isThrottled = true;

    setTimeout(() => {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, ms);
  }

  return wrapper;
}

Answer 1

Your throttle returns a function. You called throttle() but you didn't use the function it returns.

You should do something like that

  const throttledShowList = throttle(showList, 100); // <-- Add this
  searchInput.addEventListener('input', (event: Event) => {
  searchTerm = (event.target as HTMLTextAreaElement).value.toLowerCase();
  throttledShowList(); // <-- Replace the previous throttle() call with this
});

function throttle(func: Function, ms: number) {
  let isThrottled: boolean = false;
  let savedArgs: any, savedThis: any;

  function wrapper(this: any) {
    if (isThrottled) {
      savedArgs = arguments;
      savedThis = this;
      return;
    }
    func.apply(this, arguments);
    isThrottled = true;

    setTimeout(() => {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, ms);
  }

  return wrapper;
}

That way, you define a throttled version of your function that you call on input