디바운싱과 쓰로틀링

디바운싱(Debouncing)

연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다.

debouncing trailing edge

연속적으로 들어오는 입력중에 마지막 입력만 실행하게 하는 기법이다.

• window의 resize이벤트에서 마지막 변할때만 실행시키고 싶다면 사용한다.
• input 입력할때마다 api 요청을 할때 사용한다.

debouncing leading edge

연속적으로 들어오는 입력중에 처음의 입력만 실행하게 하는 기법이다.

• 제출을 누르는데 엔터로 꾹누르는 경우 처음의 요청만 보내고 뒤는 무시할수 있도록 하게 할때 사용한다.

쓰로틀링(throttling)

: 이벤트를 몇 번이나 발생 시키든 일정한 시간 간격으로 한번만 실행하도록 하는 것

예) 무한스크롤 : 컨텐츠가 끝까지 스크롤 되면 다음 페이지의 데이터들을 불러와야 한다.

만약 쓰로틀링 없이 무한스크롤을 구현한다면 마지막 페이지에서 스크롤 이벤트가 여러번 일어날 수 있다. 그래서 데이터를 여러번 불러와서 속도 관련 성능 저하가 일어날 수 있을 것 이다.

디바운싱을 사용하여 무한스크롤을 구현하면 어떻게 될까?
-> 마지막 페이지에서 스크롤 시 스크롤 다 하고 나서 데이터 받는 함수가 실행되므로 데이터를 늦게 받을수도 있을 것 같다.