Debounce & Throttle
November 03, 2021
결론
디바운스와 스로틀은 이벤트를 제어하는 기법으로, 과도한 이벤트의 발생이 성능 저하를 초래하지 않도록 하기 위해 사용합니다.
디바운스는 아무리 많은 이벤트가 발생해도 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때, 마지막 한 번만 해당 이벤트를 발생시킵니다.
스로틀은 일정 시간이 지날 때마다 해당 이벤트를 발생시킵니다.
설명
scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다.
이때, 디바운스와 스로틀을 적용하여 문제를 해결할 수 있습니다.
디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법입니다.
디바운스
출처:[Javascript] Debounce & Throttle
디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 합니다. 즉, 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 합니다.
스로틀
출처:[Javascript] Debounce & Throttle
스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 합니다. 즉, 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듭니다.
디바운스와 스로틀의 차이점
스로틀은 delay 시간마다 정기적으로 이벤트 핸들러를 호출하지만 디바운스는 delay 시간이 지나가기 전에 계속 이벤트가 발생할 경우 이벤트 핸들러를 호출하지 않습니다.
그렇기 때문에 보통 resize 이벤트 처리 혹은 input 입력 값으로 ajax 요청을 보내는 자동완성 UI 구현에는 디바운스를, scroll 이벤트 처리 혹은 무한 스크롤 UI 구현에는 스로틀을 사용합니다.
디바운스와 스로틀 사용
실무에서는 underscore의 debounce, throttle 함수 혹은 lodash의 debounce, throttle 함수를 사용하는 것을 권장합니다.
