Throttling & Debouncing

quin1392·2022년 6월 7일
0

Throttling & Debouncing

쓰로틀링과 디바운싱은 모두 비슷한 일을 합니다. 두 가지 모두 자바스크립트는 DOM 이벤트를 기반으로 실행이 되는데, 성능상의 이유로 자바스크립트의 이벤트를 제어하는 방법입니다.
예를 들어서 검색어를 입력할 때, 입력 버튼을 따로 구현하지 않고 해당 검색어와 일치하는 게시판 목록을 보고 싶다면 ChangeEvent에 서버와 통신을 하는 식으로 구현을 하게 될 것입니다. 하지만 이렇게 될 경우에 키보드 입력 하나하나에 반응을 하여 서버와 통신을 하는 횟수가 많아질 것이고, 이것은 결국 자원의 낭비로 이어지게 됩니다.
이런 자원 낭비를 해결하기 위해서 등장한 것이 쓰로틀링과 디바운싱입니다.

Throttling

쓰로틀링은 많은 이벤트의 입력에 대해서 한 번만 작동한다는 점에서 디바운싱과 비슷하지만, 차이점은 많은 이벤트 중에서 가장 처음에 입력된 것에 대해서만 작동을 한다는 점입니다.
우선 가장 먼저 입력된 이벤트를 처리하고, 마지막 입력 후 특정 시간 안에 입력되는 이벤트에 대해서는 모두 무시를 하게 됩니다.

Debouncing

디바운싱은 쓰로틀링과 다르게 마지막 입력에 대해서만 작동을 합니다. 특정 시간을 기준으로 해당 시간 내에 요청된 내용들은 모두 무시하며, 마지막 호출이 발생한 후에 일정 시간이 지날 때까지 추가적인 입력이 없을 때 실행하게 됩니다. 중간에 무언가 입력되면 시간은 초기화됩니다.

0개의 댓글