디바운스, 스로틀링

0

디바운스, 스로틀링

디바운스(Debounce)와 스로틀링(Throttling)은 이벤트 제어 방식으로, 웹 개발 등에서 자주 사용되는 개념입니다. 두 방식 모두 이벤트의 발생 빈도를 제어하여 성능 개선이나 예기치 않은 동작 방지를 위해 활용됩니다.

디바운스

디바운스는 연이어 발생하는 이벤트 중에서 마지막 이벤트만 처리하는 방식입니다. 주로 사용자가 입력 필드에 값을 입력할 때나 브라우저 창 크기를 조정할 때 등에 활용됩니다.

예를 들어, 사용자가 검색어를 입력하는 입력 필드에 디바운스를 적용한다면, 사용자가 연속해서 문자를 입력할 때마다 실시간으로 검색 결과를 요청하는 것이 아니라, 일정 시간 동안 입력이 없을 때 마지막 입력 값을 기반으로 한 번만 검색 요청을 보내게 됩니다. 이를 통해 사용자가 입력을 마치고 잠시 기다린 후 검색 결과를 표시하므로, 불필요한 요청 횟수를 줄이고 성능을 향상시킬 수 있습니다.

스로틀링

스로틀링은 일정 시간 간격으로 이벤트를 제한적으로 발생시키는 방식입니다. 주로 스크롤 이벤트나 리사이즈 이벤트 등과 같이 빈번하게 발생하는 이벤트에 사용됩니다.

예를 들어, 사용자가 웹 페이지를 스크롤할 때 스로틀링을 적용한다면, 스크롤 이벤트가 매번 발생하는 것이 아니라 일정 시간 동안 한 번만 발생하도록 제어할 수 있습니다. 이를 통해 스크롤 이벤트의 빈번한 발생으로 인한 브라우저 성능 저하를 막을 수 있습니다.

차이점 요약

디바운스: 연이어 발생하는 이벤트 중 마지막 이벤트만을 처리하므로, 불필요한 이벤트의 처리를 방지하고 성능을 개선합니다.

스로틀링: 일정 시간 간격마다 이벤트를 발생시킴으로써, 너무 빈번한 이벤트 발생으로 인한 성능 저하를 방지합니다.

profile
지치지 않는 백엔드 개발자 김성주입니다 :)

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

개발자로서 배울 점이 많은 글이었습니다. 감사합니다.

답글 달기