[TSL] 디바운싱과 쓰로틀링

intersoom·2023년 8월 8일

TSL

목록 보기

1/11

🤔 왜 정리했는가?

디바운싱과 쓰로틀링은 검색 기능에서 많이 쓰인다고만 알고 있었다.
그래서 이번 프로젝트에서 검색 미리보기를 보여줘야하는 기능을 구현해야할 때, 바로 찾아서 사용할 수 있었다.
하지만, 정확히 디바운싱이 무엇이고, 쓰로틀링이 무엇인지, 둘의 차이 점이 무엇인지는 알지 못했다. 따라서 이번 기회를 통해서 제대로 공부하고 추후에도 잘 활용할 수 있었으면 해서 정리해보았다.

📍 디바운싱 - 특정 시간 이후에 한 번만 실행

이전에 요청을 취소하고 가장 최근의 요청만 받아들여짐
즉, 연속된 요청을 보내면 가장 마지막에 보낸 요청만 보내짐

작동 원리

function debouncing(func, timeout = 200) {
  clearTimeout(timerId);
  timerId = setTimeout(func, timeout);
}

새로운 요청이 있으면, 타이머를 리셋함
아무 이벤트가 발생하지 않고 일정 시간이 지나면 실제 요청 보냄
따라서 연속 요청이 발생하는 경우,
1. 요청1
2. 요청2 (요청 1 타이머 리셋: clearTimeout)
3. 요청3 (요청2 타이머 리셋: clearTimeout)
4. 요청4
5. 다른 요청 없이 200ms 지남
6. setTimeout 안의 함수(func) 실행됨

왜 사용할까?

예를 들어서, "intersoom"을 검색해야하는 상황이라면, i, n, t, e, r, s, o, o, m 각 글자를 입력할 때마다 서버에 API 요청을 한다면, 서버 자원에 큰 부담을 줄 것이다.
이가 필요한 요청일까 생각해봤을 때, 그렇지 않다. 연속적으로 요청하는거라면, 마지막 요청만 실행되어도 사용자가 원하는 결과물은 받을 수 있다.

위와 같이 연달아서 발생하는 이벤트를 한 번에 이벤트로 만들 수 있고 이가 유리한 곳에서 쓰인다.
따라서 디바운싱을 사용하는 것이다.

사용

위와 같은 이유로 주로 유료 API를 사용할 때 큰 효과를 볼 수 있다!
돈을 아낄 수 있으니, 말이다. 💸
검색 결과 목록 표시
- 실제로 검색 미리보기를 만드는 것에서 사용해보았다.
  실제 사용 코드는 클릭 시, 확인 가능하다!
에디터의 자동저장 기능
등등에 쓰인다고 한다.

📍 쓰로틀링 - 일정한 간격으로 한 번만 실행

마지막에 함수가 호출되고 설정한 시간만큼은 다른 함수를 호출하지 않는 것
즉, 가장 먼저 보낸 요청만 실행되고 설정 시간만큼 동안 보낸 요청은 무시됨

작동 원리

function throttling(func, timeout = 200) {
  if (timerId) {
    return;
  }

  timerId = setTimeout(() => {
    func();
    timerId = undefined;
  }, timeout);
}

새로운 요청이 있으면 timerId를 등록해두고 특정 시간 동안 다른 요청 받지 않음
시간 끝나면 새로운 요청 받음
따라서 timerId가 등록되고 200ms가 지날 때까지는 아무리 요청을 보내도 요청이 등록되지 조차 않음

왜 사용할까?

매우 짧은 주기에 발생하는 반복적인 요청을 다 받아서 처리하려면, 리소스가 너무 많이 들 것이다.
그런데, 이를 쓰로팅을 사용한다면, 요청을 특정한 주기로 처리할 수 있게 된다.

반복적인 요청의 대표적인 예시로는 마우스 이벤트가 있다.
이로 예를 들어서 설명해보겠다. 아무 처리하지 않은 상태에서 스크롤을 한 번에 쭉 내렸다고 하면,
스크롤 위치가 바뀔 때마다 요청이 가면서 매우 짧은 시간에 굉장히 여러 번의 요청이 발생할 것이다.
이는 비효율적이다.
쓰로트링을 활용해서 스크롤 위치를 설정한 주기에 따라서 요청을 처리하면, 훨씬 효율적일 것이다.
따라서 쓰로틀링을 사용하는 것이다.