7. Debounce와 Throttle

목표

Debounce와 Throttle을 통해 서버의 과부화 및 앱의 최적화를 생각할 수 있으며, 적절한 사용 상황과 상용법을 확인하자.

---

*해당 내용은 본인의 개발 공부에 있어서 여러가지 참고하며 기록했던 내용을 복기하고 이해하고자 작성한 블로그 글입니다. 같이 공부를 해나가며 Flutter라는 언어에 취미를 가지신 분 들이 개념을 잡는데 도움이 되었으면 합니다. 참고한 홈페이지 등에 대해서는 각 페이지별 하단에 명시하여 두었습니다. 수정 및 문의 사항이 있으면 알려주시길 바랍니다.

 

 

요약

1. Debounce와 Throttle 모두 특정 함수의 실행을 제한한다
2. Debounce는 특정 기간 안의 함수 실행을 모두 취소하고 마지막에 실행을 한다
3. throttle은 함수 실행 후 특정 기간 동안의 추가로 실행되는 것들을 모두 취소한다.

 

Debounce

: 함수에서 지정해놓은 시간 동안 함수가 재호출되면 기존 함수를 취소하고 재호출이 된 함수를 지정해 놓은 시간동안 기다린 후에 실행한다.

그림설명: 1 함수를 실행하고 지정된 특정 시간 (5초 내) 1함수가 다시 실행되면, 기존 실행이 되고 있던 함수는 취소하고 다시 실행된 함수를 특정 시간이 모두 지난 이후에 다시 발현시킨다.

Debounce 사용 예시

장바구니의 구매 버튼에서 여러번 클릭을 진행하면 실행할때 마다 서버로 전송이 된다. 이는 서버에 부담이 되므로 Debounce를 사용하여 특정 시간을 설정함으로써 함수가 여러번 실행되는 것을 막을 수 있다.

 

 

Throttle

: 무언가 반복으로 하는 것을 제한하는 방법. 즉, 함수는 즉시 호출하면서 현재 상태를 유지하되 연속적인 함수 호출은 막는 방법이다.

 

 

그림설명2, 1의 일을 입력을 하면 1이 바로 호출이 된다 (일정 interval을 임으로 지정해서 호출시간을 조절할 수 있다).

Throttle 적용 예시

스크롤 이벤트, 자동완성 기능

 

 

Debounce와 Throttle의 차이점

Debounce는 입력이 끝날때까지 무한 대기를 하나, throttle은 입력이 시작되면 일정주기로 실행을 진행한다.

예) Apple을 검색창에 입력한다고 생각할시 Debounce는 ‘apple’을 모두 입력 후 일정 시간이 흐른 후 서버에 요청을 진행한다. 하지만 throttle은 ‘a’, ‘ap’, ‘app’ 등 문자열을 일정간격으로 서버에 요청을 한다.

 

 

참고:

1. sht-3756.log https://velog.io/@sht-3756/Debounce%EC%99%80Throttle%EC%82%AC%EC%9A%A9

    2. RxJSMarble https://rxmarbles.com/