throttle과 debounce

JavaScript로 개발을 하는 상황에서 자주 마주치게 되는 문제 중 하나는 과도한 이벤트 발생이다.

예를 들어, 사용자가 입력 필드에 글자를 빠르게 입력하거나, 마우스를 빠르게 움직일 때마다 이벤트가 계속해서 발생하여 성능 저하를 야기할 수 있다.

 

이러한 문제를 해결하기 위한 것이 throttle과 debounce이다.

 

💡 Throttle 💡

Throttle은 일정 시간 간격으로 이벤트를 제한하는 기법이다.

 

즉, 특정 시간 이내에 발생하는 여러 개의 이벤트 중 가장 마지막 이벤트만 실행하거나, 일정 시간마다 한 번씩만 이벤트를 실행한다.

 

⭐️ Throttle의 장점 ⭐️

1. 일정한 간격으로 이벤트 실행: 사용자 경험을 저해하지 않으면서 성능을 유지할 수 있다.
2. API 호출 제한: 서버에 부하를 주는 API 호출을 제한하여 서버 자원을 효율적으로 활용 가능하다.

 

🧐  어떨 때 사용할까?  🧐

1. 스크롤 이벤트: 스크롤 이벤트가 너무 자주 발생할 때, 일정 시간 간격으로 스크롤 이벤트를 처리하여 성능을 향상 시킬 수 있다.
2. resize 이벤트: 브라우저 창 크기가 변경될 때마다 레이아웃을 재계산하는 것은 비용이 많이 든다. 이때 Throttle을 사용하여 resize 이벤트를 제한하면 성능을 향상시킬 수 있다.

 

💡Debounce💡

Debounce는 특정 시간 동안 이벤트가 발생하지 않으면 한 번만 이벤트를 실행하는 기법이다.

 

즉, 사용자가 입력을 완료한 후 일정 시간이 지난 후에 이벤트를 실행한다.

 

⭐️ Debounce의 장점 ⭐️

1. 사용자 입력 완료 후 처리: 사용자가 입력을 완료할 때까지 기다렸다가 이벤트를 처리하므로 불필요한 요청을 줄일 수 있다.
2. 검색, 자동 완성 기능: 검색어 입력 중에 매번 API 호출을 하지 않고, 사용자가 입력을 완료한 후에 한 번만 호출하여 성능을 향상시킬 수 있다.

 

🧐  어떨 때 사용할까?  🧐

1. 검색 기능: 사용자가 검색을 입력할 때 API를 호출하는 대신, Debounce를 사용하여 입력이 완료된 후에 한 번만 호출하여 서버 부하를 줄일 수 있다. (ex. 인터넷 검색 기능)
2. 자동 저장: 문서 편집 시 내용이 변경될 때마다 자동으로 저장하는 기능을 구현할 때, Debounce를 사용하여 일정 시간마다 한 번씩 저장하여 사용자 데이터 손실을 방지할 수 있다. (ex. word와 같은 응용 프로그램 자동 저장)

 

✅ Throttle과 Debounce 한 눈에 보기 ✅

특징	Throttle	Debounce
정의	일정 시간 간격으로 이벤트 실행	특정 시간 동안 이벤트가 발생하지 않으면 한 번 실행
사용 시기	연속적인 이벤트 발생 시	입력 완료 후 처리
예시	스크롤, resize 이벤트	검색, 자동 저장

 

🔥 결론 🔥

Throttle과 Debounce는 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 필수적인 기술이다.

이벤트 발생 빈도가 높은 상황에서 Throttle과 Debounce를 적절히 활용한다면, 불필요한 연산을 줄이고 더 부드러운 사용자 인터페이스를 구현할 수 있다.