Debouncing, Throttling

1. Debouncing

구글의 검색창을 매의 눈으로 살펴보면 검색어를 입력할 때 바로 연관 및 추천 검색어가 뜨는 것이 아니라 약간의 딜레이를 가지고 뜨는 것을 알 수 있다. 이는 디바운싱이라는 방식이 적용된 것으로 연속해서 일어나는 이벤트를 이벤트가 일어날 때 마다 처리하는 것이 아니라 한 덩어리로 묶어서 처리하는 방식이다.
예시로 든 검색창 기능을 디바운싱 없이 사용한다면 타이핑이 이루어질 때 마다 요청이 이뤄지기 때문에 리소스 낭비가 엄청날 것이다.
때문에 디바운싱 기능이 필요하다.

2. Throttling

디바운싱의 예로 들은 구글의 검색창에 귀여운 고양이 사진을 검색해보았다.

그리고 밑으로 스크롤을 해보면

스크롤바의 길이에 변화가 생긴 것이 보인다.
원래 스크롤을 아주 조금이라도 하더라도 이벤트가 일어난 것이다. 하지만 스크롤바는 매번 바뀌는 것이 아니라 일정 양 이상의 스크롤을 했을 때 바뀐다. 이처럼 디바운싱과 반대로 한 번 실행한 함수를 지정된 동안 다시 실행하지 않는 것이 쓰로틀링이다.

Debouncing : 선 딜레이 후 실행
Throttling : 선 실행 후 딜레이