1.4Debounce와 Throttle

Intro

이번에 검색 등의 필터가 들어간 앱을 만들면서 debounce라는 용어를 접하게 되었고, throttling은 네트워크 탭에서 3G, 4G, … No Throttling 등의 용례로 본 적이 있어 각기 정리하려고 했었는데, 조사하다 보니 공통점이 있는 기법이라 한 번에 정리한다.

둘 다 유저가 발생시키는 인풋 또는 이벤트를 전부 받아서 함수를 처리한다면 생기는 비효율을 방지하기 위한 기법들이다.

Debounce

연속적으로 발생한 이벤트에서, 중간 단계를 무시하고 마지막 또는 처음의 상태만을 함수로 실행하는 기법이다.

• 키워드 검색 또는 자동완성 기능 등에서 api 함수 호출 횟수를 줄이고 싶을때
• 사용자가 창 크기 조정을 멈출때까지 기다렸다가 resizing event를 반영하고 싶을때

Throttle

출력을 조절한다는 의미로, 이벤트를 일정 주기마다 발생시켜 주기 사이에 발생한 이벤트는 무시하는 기법이다.

• 스크롤에 따라 뭔가를 해야할 때, 모든 스크롤을 기록하는 것은 성능에 문제를 주기에 특정 시간마다의 스크롤 위치를 체크하는 사례