디바운싱, 쓰로틀링 : 이벤트 제어로 성능 최적화 기법

쓰로틀링(Throttling)과 디바운스(Debouncing)는 자주 발생하는 이벤트를 제어하여 성능을 최적화하는 기법으로, 주로 스크롤, 리사이즈, 텍스트 입력 같은 빈번한 사용자 상호작용에 사용됩니다. 두 기법 모두 불필요한 함수 호출을 줄여 성능 문제를 방지하지만, 그 동작 방식과 적용 상황이 다릅니다.

1. 디바운스 (Debouncing)

디바운스는 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 함수 호출을 미루는 기법입니다. 사용자가 계속해서 이벤트를 발생시키는 동안 함수 호출은 지연되며, 마지막 이벤트 이후 일정 시간이 지나면 비로소 함수가 실행됩니다.

동작 방식

• 이벤트가 발생할 때마다 타이머를 설정합니다.
• 만약 새 이벤트가 이전 타이머가 끝나기 전에 발생하면, 이전 타이머를 취소하고 새로운 타이머를 설정합니다.
• 마지막 이벤트 이후 일정 시간이 지나면 함수가 실행됩니다.

특징

• 마지막 이벤트 이후 일정 시간이 지나야만 함수가 실행됨.
• 짧은 시간 동안 여러 번 발생하는 이벤트 중 마지막 이벤트에 대한 함수 호출을 보장.

적용 예시

• 검색창 입력: 사용자가 검색어를 빠르게 입력할 때 실시간으로 요청을 보내기보다, 입력이 끝난 후 일정 시간 후에만 요청.
• 창 크기 조정: 사용자가 윈도우 사이즈를 변경하는 동안 지속적으로 레이아웃을 업데이트하기보다는, 리사이즈가 끝난 후에 한 번만 레이아웃을 조정.

---

2. 쓰로틀링 (Throttling)

쓰로틀링은 일정 시간 간격 내에서 한 번만 함수가 호출되도록 제한하는 기법입니다. 이벤트가 여러 번 발생해도 일정 시간 동안에는 한 번만 실행되며, 지정된 시간이 지난 후에 다시 이벤트가 발생할 경우 함수가 다시 실행됩니다.

동작 방식

• 함수가 호출되면 타이머를 설정하고, 그 타이머가 완료될 때까지 추가적인 함수 호출을 무시합니다.
• 타이머가 완료되면 다음 이벤트를 처리할 수 있게 됩니다.

특징

• 함수가 지정된 시간 간격마다 한 번만 호출됨.
• 이벤트가 여러 번 발생하더라도 주기적으로 함수가 실행됨.

적용 예시

• 스크롤 이벤트: 사용자가 스크롤할 때마다 발생하는 이벤트 처리 빈도를 제한하여 성능 최적화.
• 버튼 클릭 방지: 사용자가 버튼을 여러 번 빠르게 클릭하는 것을 막고, 일정 시간에 한 번씩만 함수가 실행되도록 제한.

---

비교

특징	디바운스 (Debounce)	쓰로틀링 (Throttle)
동작 원리	마지막 이벤트 후 일정 시간이 지나야 함수가 실행됨	일정 시간마다 한 번만 함수가 실행됨
함수 호출 빈도	이벤트가 발생하는 동안 함수가 호출되지 않다가, 마지막 이벤트 후 실행	일정 시간 간격으로 함수가 주기적으로 실행됨
사용 예시	검색창 자동 완성, 창 크기 조정 처리	스크롤 이벤트 처리, 버튼 클릭 방지
타이밍	이벤트가 끝난 후에 실행되므로 즉각적인 반응이 필요 없는 경우 적합	주기적으로 실행되므로 즉각적인 반응이 필요할 때 적합
주된 목적	연속된 이벤트 호출을 최소화	이벤트 호출을 주기적으로 제어

---

결론

• 디바운스는 마지막 이벤트 이후 일정 시간 동안 대기 후에만 함수를 실행하므로, 입력이 끝난 후에 한 번만 실행되는 동작에 적합합니다.
• 쓰로틀링은 일정한 시간 간격으로 이벤트를 제한해 실행하므로, 스크롤이나 마우스 이동 같은 이벤트를 주기적으로 처리할 때 유용합니다.