Debouncing.md

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

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

작동 원리

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