디바운스와 스로틀

• 스크롤 이벤트가 발생하면 1을 출력하는 함수를 실행시킨다고 하자

기본

• 아날로그 신호처럼 콘솔창에 1이 찍힌다

throttle

• 설정한 주기를 간격으로 1이 찍힌다

• 쓰로틀은 연속된 이벤트를 설정한 시간 간격
• 예) 스크롤중 300ms 마다 함수 실행
• 예) 네이버 검색창 자동완성

debounce

• 스크롤 이벤트 도중에는 아무것도 일어나지 않는다
• 이벤트가 끝나고 설정한 1이 찍힌다

• 디바운스는 연속된 이벤트가 멈추고, 한번 실행한다
• 마지막 이벤트로부터 설정한 시간만큼 이벤트가 발생하지 않으면 실행한다
• 예) 스크롤이 멈추고 300ms 뒤에 함수 실행
• 예) 버튼을 연속적으로 여러 번 눌러도 한 번만 실행되는… (광클 방지)

쓰는 이유

• 디바운스와 쓰로틀은 부하를 줄이기 위해 사용한다
• 매 이벤트마다 비싼 API를 호출하는 것을 방지할 수 있다