최근 프로젝트를 보고 느낀점이 무의미한 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가 유저 친화적이라고 생각합니다.

아래는 사용 예 입니다.