throttle과 debounce는 시간이 지남에 따라 함수를 몇 번이나 실행 할지를 제어하는 두가지 기술이다.
다음 스크롤 예제를 보자.
https://codepen.io/dcorb/pen/PZOZgB
보통 스크롤 할 때 초당 30개 정도의 이벤트가 발생 된다. 그러나 천천히 스크롤 하면 초당 최대 100개의 이벤트가 발생할 수 있다.
디바운스를 사용하면 여러 개의 순차적 호출을 하나의 그룹으로 "그룹화" 할 수 있다. 다음 이미지를 보자.
유사한 시간대에 일어난 이벤트를 하나의 이벤트로 합친다. 직접 조작해 보자. Trigger area를 클릭 하거나 영역에서 마우스를 움직여 보자.
https://codepen.io/dcorb/pen/KVxGqN
쉬는 시간 까지 대기 하는 것을 알 수 있다. 이벤트 그룹의 끝 부분에 이벤트가 트리거 된다.
leading 플래그를 이용하면 이벤트 시작 부분에 호출할 수 있다. 아래 예제를 보자.
https://codepen.io/dcorb/pen/GZWqNV