디바운싱과 쓰로틀링은 공통적으로 사용자가 특정 이벤트를 연속적으로 발생시킬 때 이를 제어하여 서버나 브라우저의 부하를 줄이는 목적을 가지고 있습니다.
그러나 두 방법의 동작 방식과 사용되는 상황에서의 차이가 존재합니다.
아래에서 자세히 살펴보겠습니다.
🍀 디바운싱(debouncing)
디바운싱이란 빈번하게 발생하는 이벤트를 특정한 시점 이후에 한 번만 실행시키는 최적화 방법입니다.
연이어 함수가 호출된다면 마지막(또는 처음)에 호출된 함수만 실행됩니다.
따라서 마지막(또는 처음)에 실행되는 함수를 제외한 나머지 이벤트들은 무시합니다.
디바운싱의 목적은 이벤트가 호출되는 빈도를 줄여 성능을 최적화시키는 것입니다.
사용자가 어떤 버튼을 연속적으로 클릭할 때 버튼을 클릭하는 모든 이벤트를 발생시키는 것이 아니라
클릭 이벤트가 멈추었을 때 가장 마지막 클릭 이벤트만 실행시킵니다.
구체적인 사용 사례는 다음과 같습니다.
- 검색 기능에서의 입력값 자동 완성: 사용자가 검색어를 입력할 때, 자음/모음/알파벳이 입력될 때마다 요청을 보내지 않고, 입력이 멈춘 후 일정 시간 뒤에 한 번만 요청을 전송
- 윈도우 창의 크기를 조절: 사용자가 창 크기를 변경할 때 발생하는 resize 이벤트는 매우 빈번하게 일어나므로 마지막 크기 조정이 끝난 후 한 번만 이벤트를 발생
- 입력폼 제출: 사용자가 폼 제출 버튼을 빠르게 여러 번 클릭하더라도 마지막 클릭 이벤트만 처리
참고로 바운스(bounce)란 기계적 스위치를 누를 때 스위치의 접점에서 on/off가 의도치 않게 여러 번 반복되는 현상을 말합니다. 따라서 불필요하게 여러 번 눌리는 이 현상을 없애기 위한 것이 디바운싱이라고 생각하면 헷갈리지 않을 것입니다.
🍀 쓰로틀링(throttling)
쓰로틀링이란 빈번하게 발생하는 이벤트를 일정 주기에 한 번씩 실행시키는 최적화 방법입니다.
일정 주기동안 함수가 여러 번 호출되어도 해당 주기에서는 한 번만 실행됩니다.
따라서 어떤 주기동안 이벤트가 한 번 실행되었다면 다음 주기가 오기 전까지 일어나는 다른 이벤트들은 모두 무시합니다.
쓰로틀링의 목적은 이벤트가 일정한 간격으로 실행되도록 제한하는 것입니다.
쓰로틀링 주기를 10초로 정해둔 버튼이 있고 사용자가 이 버튼을 연속적으로 클릭한다면
10초에 한 번씩만 클릭 이벤트를 실행시키는 것입니다.
10초 동안 10번을 클릭했어도 1번으로 인식되며, 중간에 일어난 9번의 클릭 이벤트들은 모두 무시됩니다.
구체적인 사용 사례는 다음과 같습니다.
- 스크롤 이벤트 처리: 사용자가 페이지를 스크롤할 때 발생하는 scroll 이벤트를 매 프레임마다 처리하면 성능 저하가 발생하므로 일정 간격마다 발생하도록 제한
- 마우스 이동 이벤트: 마우스를 움직일 때 발생하는 mousemove 이벤트를 실시간으로 처리하면 성능 저하가 발생하므로 일정 시간 간격으로 처리하도록 제한(ex-툴팁 표시)
- API 요청: API에 시간당 요청 수가 제한되어 있는 경우이거나 너무 많은 요청이 가 부하가 발생하지 않도록 요청 간격을 일정하게 유지
읽어주셔서 감사합니다:)
