최근 프로젝트를 보고 느낀 점이, 무의미한 API 호출이 쌓여

재앙으로 닥치는 것을 보아 이러한 작은 성능 개선을 정리하고자 합니다.

검색엔진을 구현할 때 API 호출을 줄이는 방법으로서 지연 호출

하는 방법에 대해 정리해 보겠습니다.

알아야할 것들

1. setTimeout
2. clearTimeout

setTimeout은 비동기적으로 설정한 delay 이후에 실행할 수 있도록 하는 함수입니다.

clearTimeout은 setTimeout을 취소할 수 있습니다. MDN 참고

(macroTask queue에서 event loop를 통해 call stack으로 넘어갑니다.)

구현

구현 방법은 싱글톤과 유사합니다. setTimeout으로 delay 이후에 API 호출을 하는데, 도중에 입력이 들어오면 기존 setTimeout을 죽이고 새로운 setTimeout을 만드는 것입니다. (클로저를 사용해서 구현합니다.)

const createDelay = (__callback, ms) => {
  let instance;

  return () => {
    clearTimeout(instance);
    instance = setTimeout(() => __callback(), ms);
  }
}

const fetchData = () => {
  ...fetchAPI Call
}

const delaySearch = createDelay(fetchData, 250);

개인적으로 delay는 250ms ~ 500ms가 유저 친화적이라고 생각합니다.